0

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.

I've even tried giving each button a unique id and referencing each one individually with no success.

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 ?

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
samuk
  • 157
  • 1
  • 3
  • 19

4 Answers4

1

You need to run the code AFTER you have added the dynamic content to the page. If you run the code before, jQuery doesn't see the dynamic content. I would run the code when the user presses a button then again after the dynamic content is added. Then remove it after you are done processing.

Also you can use $( ".dynamicbutton").prop( "disabled", true);

Bot
  • 11,868
  • 11
  • 75
  • 131
1

You need to delegate the events for such case as the element is not available in the DOM when the event is bound to the #target

Also it is preferable to use .prop() instead of .attr()

Try this

$('body').on('click', '#targetdiv', function() {

     $(".dynamicbutton").prop( "disabled", true);

});
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
1

It seems if I use a class that hasn't been used for selection previously, then I can use it to select my dynamically generated group.

So if I generate an indeterminate number of inputs with class="brandspankinnewelements" and that class hasn't been used previously as a selector for any other elements on the page

I can now select that group with $( ".brandspankinnewelements" )

That makes life a lot simpler.

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
1

How about this? Insert the script after the #targetdiv and try if it will work. The .dynamicbutton from here will only disable all the class dynamicbutton inside the id targetdiv.

<div id="targetdiv"></div>
<script type='text/javascript'>
    $('.dynamicbutton').click( function() { 
        $('#targetdiv .dynamicbutton').attr("disabled", "disabled");
    });
</script>
Raymond Saga
  • 159
  • 3
  • 10