Using Jquery to control dynamically generated HTML
OK I've looked around the site for any hint on this but if it's there I've missed it, so sorry if this has been answered and I'm not seeing it.
What I've got is a web page containing a DIV into which I'm dynamically putting a list of entries with selector buttons, I've simplified the code a lot for this example
The target DIV looks like
- <div id="targetdiv"></div>
I ask a server for a list and build a string that looks something like
- <div>
- nameofentryfromserver1
- <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver1')">
- </div>
- <div>
- nameofentryfromserver2
- <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver2')">
- </div>
- <div> ... same thing for next entry and so on
Then I insert this into the document with
- $( "#targetdiv").html( generatedstring );
Now this works fine and I get a nice list and when I click on the generated button the correct routine is started and the parameter is passed correctly and I get the results I expect.
However when the button is pressed I would like to disable all the "dynamicbutton" class elements, re enabling them once processing is complete.
Inside the routine I call I have the line
- $( ".dynamicbutton").attr( "disabled", "disabled");
But this doesn't seem to affect any of the dynamically generated content, if I have other buttons on the page belonging to the same class they get disabled though, so it looks like I can only access content from the originally loaded document using this method.
So is there a way of generating this content so that jQuery can access it via it's normal element selection, or is there some other technique I need to usein order to manipulate them ?