Ajax 调用后的可点击行

Question

我有一个 table 拖车，可以通过以下方式点击：

$(".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 调用后的可点击行

Clickable Rows after Ajax Call

javascript

ajax

jquery