CODEWITHSUNDEEP
javascriptjquery
perpetual_dream
perpetual_dream

Reputation: 1036

How to loop through AJAX loaded checkboxes?

I want to do something like this on checkboxes which are loaded through AJAX:

$('input:checkbox').each(function() {
        $(this).hide();
        alert("hi");
        $('<div class="checkbox-fx"><div class="checkbox"></div></div>').insertAfter(this);
    });

On Document Load the checkboxes aren't loaded yet and therefore the function doesn't get implemented. How can I loop through newly loaded checkboxes?

Thanks!

Upvotes: 0

Views: 708

Answers (2)

Thulasiram
Thulasiram

Reputation: 8552

    $.ajax({
    url: '/YourUrl', type: 'Get', dataType: 'json',
    // data: { id:'' },
     success: function(html) {
        $(html).find('input:checkbox').each(function() {
    if($(this).next('div.checkbox-fx').length===0)
    {
            $(this).hide();      
            $('<div class="checkbox-fx"><div class="checkbox"></div></div>').insertAfter(this);
}
        }).appendTo(document.body);

     }
    });

Upvotes: 0

moribvndvs
moribvndvs

Reputation: 42497

Assuming the checkboxes are loaded using something like $.ajax, your success method would be where you'd process the resulting HTML after it was added to the document.

$.ajax({
 // your ajax options here
 success: function(html) {
    $(html).find('input:checkbox').each(function() {
        $(this).hide();
        alert("hi");
        $('<div class="checkbox-fx"><div class="checkbox"></div></div>').insertAfter(this);
    }).appendTo(document.body); // takes the HTML from the ajax call and processes each checkbox. when done, the results are then appended to the document
 }
});

Upvotes: 3

Related Questions