Question

我有一张带有可通过以下方式点击的拖曳的表：

$(".clickableRow").click(function() {
    console.log('Row Clicked');
    window.document.location = $(this).attr("href");
});

加载页面后效果很好。但是，我们添加了一个搜索函数，可以在Ajax调用后动态添加行。

完成调用后，行不再可以点击。

$('#carName').changeOrDelayedKey(function(e) {
    var carSearch = $(this).val();
    console.log(carSearch);
    var carRows = $('#carTable tr[id^="product-"]');
    $(carRows).each(function () {
            console.log('This:'+this);
            $(this).remove();
    });


    //Get new data
    $.post("search.php", {s: carSearch}, function (data) {
            console.log(data);
            $.each(data, function (index) {
            if ($('#product-' + data[index].externalProductId + '').length == 0) {
                    $('#carTable').append('<tr id="product-' + data[index].externalProductId + '" class="clickableRow" href="/'+data[index].url+'/"><td>' + data[index].title + '</td></tr>');
            }
    });

    }, "json");
   }, 400, 'keyup');

    $(".clickableRow").click(function() {
            console.log('Row Clicked');
    window.document.location = $(this).attr("href");
                    });

Answer 1

click()函数无法识别动态添加的元素。您必须使用如下事件委托：

$(document).on('click', '.clickableRow', function() {
    console.log('Row Clicked');
    window.document.location = $(this).attr("href");
});

Ajax调用后的可点击行

1 个答案: