How to access jquery dynamically generted elements

Question

Hi, I have this code.

<div id="static_element"></div>

<script>
   $(document).ready(function()
   {
      $("#static_element").html("<b class="dynamic_element">Test</b>");

      //this row wont work
      $(".dynamic_element").css({"color":"red"});
   })
</script>

i want to access the tag "b" with the class "dynamic_element" but i cant because it was dynamically generated.

Any ideas? Thanks

Answer 1

This:

$("#static_element").html("<b class='dynamic_element'>Test</b>");

will work. It doesn't matter that the element is generated by script, jQuery selectors will match all elements that are present in the DOM at the time they are called. The only culprit is with Ajax functions, like load. Elements added to the DOM with these methods do not appear the time the methods are called, but asynchronously, when the request is completed. Luckily, there are callbacks that you can use for such cases.

Answer 2

you are generating the html the wrong way. Always put html in single quotes so that the double quotes wont break it:

 $("#static_element").html('<b class="dynamic_element">Test</b>');