javascript - 添加动态元素时刷新 JQuery 选择器

Question

在接下来的代码中，我使用 AJAX 调用 php 脚本，然后用 JSON 响应更新 #inner_div。与此同时，#gimme_moar 按钮被注入(inject)到 #inner_div 中，因此我添加了点击处理程序以询问更多结果。

因此，我们将再次使用 ajax 调用相同的 PHP 脚本，然后我们将 JSON 响应附加到 #tabla，它是 #inner_div 的一部分.

一切都按预期工作，但有一件事...$(".faulty_selector")正在处理前 50 个“行”...如果我继续添加“行”，它们将不会与 $(".faulty_selector") 捆绑在一起，如果我再次添加此处理程序，它将复制自身，最后执行的次数与 $(".faulty_selector") 相同> 当我们点击 #gimme_moar 按钮时。

$.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);
            }
        });
    }
    });

根据很多人的说法，live() 或 on() 应该能够毫无问题地处理这种情况......但此时我正在使用 on('clic', etc etc) 并且它是正在工作...

有没有办法刷新/重新绑定(bind) 50 个新的 $(".faulty_selector")？

Answer 1

委托(delegate)事件

改变

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

到

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

并将点击事件移动到 ajax 方法之外。否则，您将为发送的事件 ajax 请求绑定(bind)相同的事件。

似乎还缺少 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);
        }
    });
});