Jquery selector problem

Question

I have two in a table with ids row_26 and notificationrow_26. notificationrow_26 is dynamically added to DOM after page has been loaded.

I want to highlight notificationrow_26. So I use

var deviceUID = 26;
$("#notificationrow_" + deviceUID).effect("highlight", {}, 3000);

but when I do this. It does not highlight that row. I also tried just accessing notificationrow_26 but it does not access that even.

It does highlight row_26 when I ask it to. I heard something about jquery live but how can I access it with jquery live? I think jquery live is only for events and stuff. I just want to access this row which has been added to DOM dynamically.

Am I missing something?

Answer 1

You will need to invoke the .effect statement after you have added the elements to the DOM. You could use .live if you're attaching elements to DOM by 'click' or other common events ( not 'change' though, you'll need livequery for that ).

Answer 2

I'm not familiar with .effect(), is it a plugin or part of another JavaScript framework? The following code will highlight the row, providing that there are no conflicts with $ shorthand on the page

var deviceUID = 26;
$("#notificationrow_" + deviceUID).css('background-color','highlight');

this can only be applied after the row has been inserted into the DOM (what I mean is that when the command is executed, it will only affect those elements that match the selector that exist in the DOM at the time).

So, depending on how the row is being added, you could add the highlighting in a callback function if there is one, chain the highlighting command onto the row before/immediately after it's inserted into the DOM. Here's a demo to show the above code.