Jquery css() on dynamically added elements

Question

I have a table with some rows which are not normally displayed (using a class with CSS display:"none";). On a button press I want to display these rows. The problem is that the whole table is dynamically added to the page and so the code does not work.

HTML

<tr class="HiddenRowClass"> ....  </tr>

JS

function ShowRowsClick() {
$(".HiddenRowClass").css("display","");
}

I have read about using .on() for binding events to dynamically generated elements, but I can't find anything talking about non event binding. (If that is the correct term for it)

Remove css property display instead $(".cssClass").removeCss("display") — Mihir
– Mihir, Commented Oct 19, 2014 at 6:46
@doniyor thanks. Please ignore my previous comment, method removeCss does not exist. show method would do. — Mihir
– Mihir, Commented Oct 19, 2014 at 6:55
@Mihir I'm thinking that $("tr").removeClass("HiddenRowClass"); would work. — scartag
– scartag, Commented Oct 19, 2014 at 6:57
@scartag probably not, this will remove identification class from the rows which are to be hidden — Mihir
– Mihir, Commented Oct 19, 2014 at 7:08

scartag · Accepted Answer · 2014-10-19 06:43:24Z

3

You'll have to make the display show.

$(".HiddenRowClass").css("display","block");

Alternatively since you hid it using "display:none" you can use a jquery function to reveal it.

$(".HiddenRowClass").show();

answered Oct 19, 2014 at 6:43

scartag

17.7k3 gold badges52 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David G Over a year ago

Thanks. This works a treat(.show()) . I often use display:none and then display:"" to hide and unhide things. I am not sure why it doesn't work in this case?

scartag Over a year ago

@DavidG display:"" doesn't work and in this case you had the display:none in a class so you needed the display:block to override the one in the HiddenRowClass

Leonardo Gonzalez · Accepted Answer · 2014-10-19 06:50:06Z

0

How are the rows dynamically added? And how are you binding the button click event to your ShowRowsClick () function? As long as the button is pressed after the rows are in the DOM, and you have an event binding the button click to your ShowRowsClick() function, you should be OK. If the rows are being added AFTER the button is clicked, then you will have to do something more complicated like having your button click function set a state variable and have your row-adding function check that variable to see if the rows should be displayed.

answered Oct 19, 2014 at 6:50

Leonardo Gonzalez

1,6391 gold badge12 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery css() on dynamically added elements

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related