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

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_resultsdiv 是通过 ajax 返回的。

如何解决这个问题呢？

Answer 1

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

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

委托活动

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

Answer 2

您应该将 jQueryon用于动态内容。

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