CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorsrefresh
Solrac
Solrac

Reputation: 931

Refreshing JQuery selectors when dynamic elements are being added

In the next code I make a call to a php script using AJAX and then I update #inner_div with the JSON response. Along with this, a #gimme_moar button was injected into #inner_div so I added the click handler to ask more results.

As a result we will call the same PHP script again using ajax, again, and then we will APPPEND the JSON response to #tabla which is part of #inner_div.

Everything works as expected but 1 thing... $(".faulty_selector")is working on the first 50 "rows"... if I keep adding "rows" they won't be tied up with $(".faulty_selector") and if I add this handler again it will duplicate itself having at the end as many executions of $(".faulty_selector") as we clicked the #gimme_moar button.

$.ajax({
type: "POST",
url: URL,
data: {
    data1: '1',
    data2: 2,
    data3: 3
},
dataType: "json",
timeout: 25000,
success: function (data) {
    var counter = 50;
    $('#inner_div').html(data.answer);
    $(".faulty_selector").on('click', function () {
        myfunction_action(this.id);
    });
    $("#gimme_moar").click(function () {
        $.ajax({
            type: "POST",
            url: "URL",
            data: {
                data1: '1',
                data2: 2,
                data3: 3
            },
            dataType: "json",
            timeout: 25000,
            success: function (data) {
                counter = counter + 50;
                $('#tabla').append(data.datos);
            }
        });
    }
    });

According to a lot of ppl, live() or on() should be able to handle this situation without any problems... but at this point I'm using on('clic', etc etc) and it ain't working...

Is there any way to refresh / rebind the 50 new $(".faulty_selector")?

Upvotes: 1

Views: 75

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

Delegate the event

Change 

$(".faulty_selector").on('click', function() { myfunction_action(this.id); });

to 

$(document).on('click', ".faulty_selector",  function() { myfunction_action(this.id); });

And move the click event to outside of the ajax method. Otherwise you will be binding the same event for event ajax request being sent.

Also seems to be missing the closing braces for ajax.

$.ajax({
    type: "POST",
    url: URL,
    data: {
        data1: '1',
        data2: 2,
        data3: 3
    },
    dataType: "json",
    timeout: 25000,
    success: function (data) {
        var counter = 50;
        $('#inner_div').html(data.answer);
    }
});

$(document).on('click', ".faulty_selector", function () {
    myfunction_action(this.id);
});
$(document).on('click', "#gimme_moar", function () {
    $.ajax({
        type: "POST",
        url: "URL",
        data: {
            data1: '1',
            data2: 2,
            data3: 3
        },
        dataType: "json",
        timeout: 25000,
        success: function (data) {
            counter = counter + 50;
            $('#tabla').append(data.datos);
        }
    });
});

Upvotes: 2

Related Questions