CODEWITHSUNDEEP
jquerydynamic
drake035
drake035

Reputation: 2887

Applying a function to a dynamically generated element

To style my radio buttons I'd like to use a jQuery plugin that requires the following line of code: 

$('input').iCheck();

It doesn't work though because my buttons are dynamically generated when user clicks. Is there any way to make the plugin (any plugin really) work for all elements including those dynamically generated?

EDIT: my code below, not sure if that will be very understandable.

The page has the markup for the modal window hardcoded:

<div id="fadeandscale">
    <div class="fadeandscale_inner"></div>
</div>
<a id='button_page2' class="egg_button"></a>

The .egg_button link opens the modal. A modal/lightbox jQuery plugin is then associated with this markup:

$('#fadeandscale').popup();

Then I execute a series of on() bindings.

function populate_modal(x) {

    var button_id = '#button_page' + x;
    var page_id = '#course_intro_page' + x;

    $(button_id).on('click', function() {   
        $('.fadeandscale_inner').empty(); 
        var a = $(page_id).html(); 
        **$('.fadeandscale_inner').html(a);**   // content is duplicated to modal
    });

}               
for (i = 0; i < 5; i++) { 
    populate_modal(i);
}

Then I bind the radio button styling jQuery plugin to the input elements when clicking on the link that open the modal (which also triggers duplication of page content into the modal):

$( "body" ).on( "click", ".egg_button", function() {
    $('input').iCheck();
});

From the markup hardcoded in the page, a radio button:

<div class='options_section'>   
    <input type="radio" name="modal1" id="modal1_option1" value="The analysis of large volumes of data">
    <label for="modal1_option1">The analysis of large volumes of data</label>
</div>

Upvotes: 1

Views: 506

Answers (2)

helgatheviking
helgatheviking

Reputation: 26319

If the items aren't present in the DOM on page load, then you can use jQuery's .on() to attach a function to a dynamically generated element.

I'm not sure about how you are generating the buttons, but maybe this will put you on the right path:

$( "body" ).on( "click", "input", function() {
  $( this ).iCheck();
});

EDIT

Based on your comments, the updated code is:

$( "body" ).on( "click", ".open_modal", function() {
      $( "input" ).iCheck();
});

Upvotes: 2

Bhaskara
Bhaskara

Reputation: 601

You can associate a class to all the dynamically generated elements. When you create a button add a css class attribute like this:

<button type="button" class="cls"></button>

Then in your javascript:

$(".cls").on("click", function()
{
// You can use $(this) to get any specific attribute of the button clicked
});

Upvotes: 0

Related Questions