Question

我通过ajax从数据库返回一组链接，如下所示：

function search_friends() {
    who = $('input.search_term').val();
    $.ajax({
        type: "POST",
        url: 'lib/search.php',
        data: {who:who},
        success: function(data) {
            $('.search_results').html(data);
        }
        // dataType: 'json'
    });
    return false;
}

这将返回类似的内容：

<div class="search_results">
    <p><b>results:</b></p>
    user1 <a href="add_friend.php?pid=3" class="3">add friend</a>
    <br>
    user2 <a href="add_friend.php?pid=4" class="4">add friend</a><br><hr>
</div>

但是一旦页面加载（在搜索完成之前），我就会有：

$('.search_results a').click(function() {
    alert('code');
});

但这不起作用，因为.search_results div是通过ajax返回的。

如何解决这个问题？

Answer 1

您正在尝试将事件绑定到绑定时不存在的元素。您需要使用on将click事件与事件委派绑定。

$(document).on('click','.search_results a', function() {
    alert('code');
});

委托活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

Answer 2

您应该将jQuery on用于动态内容。

$(document).on('click', '.search_results a', function(e){
 alert('code');
});

如何在通过ajax返回的结果上设置点击事件？

2 个答案:

委托活动