jquery从服务器返回的数据（已解析）向DOM添加元素

我试图从服务器的AJAX调用中返回的一长串数据中提取一些HTML（hrefs），然后将它们添加到DOM中，尝试按照前面答案中的几个示例进行操作，但似乎无法使DOM元素成为可单击的元素，尽管它似乎是作为链接添加的。因此，当单击另一个元素时，我们后退一步并尝试添加一个新元素，但也无法使其工作-在JSFIDLE中进行了尝试，代码的基本示例如下-当单击getsearchresults时，a href显示在searchresults div中，但单击时不会触发.clicakable_搜索处理程序

HTML 获取搜索结果

结果 JS代码

    $(document).ready(function() {
        $("#getsearchresults_id").click(function(event) {
        var aa = $('<a href="#" class="clickable_search">parsed substring from the return data</a>');
        $('#searchresults').append(aa);
    });

    $('.clickable_search').click(function(e) {
        console.log(".clickable_search");
        e.preventDefault();
        alert('anchor without a href was clicked');
    });
   });

$（文档）.ready（函数（）{
$（“#getsearchresults_id”）。单击（函数（事件）{
var aa=$（''）；
$（“#搜索结果”）。追加（aa）；
});
$（'.clickable_search'）。单击（函数（e）{
console.log（“.clickable_search”）；
e、 预防默认值（）；
警报（“未点击href的锚”）；
});
});

这是因为绑定时dom中不存在它。委派将事件处理程序绑定到父元素，该父元素将在事件冒泡时侦听事件。确保父元素是静态元素

如果使用jQuery 1.7，请使用委派-首选方式+

$('#searchresults').on('click', '.clickable_search',function(e){ 
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});​

jQuery 1.7及更低版本

$('#searchresults').delegate('.clickable_search','click', function(e){ 
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});​

或在元素添加到dom后绑定-如果多次单击，将添加多个元素

$(document).ready(function() {
    $("#getsearchresults_id").click(function(event) {
        var aa = $('<a href="#" class="clickable_search">parsed substring from the return data</a>');
        $('#searchresults').append(aa);
        $('.clickable_search').click(function(e) { //< --it 's your other click function
            console.log(".clickable_search");
            e.preventDefault();
            alert('anchor without a href was clicked ');
        });
    });
});​

$（文档）.ready（函数（）{
$（“#getsearchresults_id”）。单击（函数（事件）{
var aa=$（''）；
$（“#搜索结果”）。追加（aa）；
$（'.clickable_search'）。单击（函数（e）{/<--这是您的另一个单击函数
console.log（“.clickable_search”）；
e、 预防默认值（）；
警报（“未点击href的锚”）；
});
});
});​

您现在和将来都可以使用绑定与当前选择器匹配的所有元素的事件。看看下面的代码：

$('.clickable_search').live('click', function(e) {
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});

您还可以查看演示

更新 正如@wirey所说的，您可以使用如下所示的方法来repelce.live（）：

$('body').on('click', '.clickable_search', function(e) {
    console.log(".clickable_search");
    e.preventDefault();
    alert('anchor without a href was clicked');
});

从jQuery 1.7开始，.live（）方法已被弃用。使用.on（）附加事件处理程序。较旧版本jQuery的用户应优先使用.delegate（），而不是.live（）来自jquerylivedocs