Question

我试图从服务器的AJAX调用中返回一长串数据中提取一些HTML（一个hrefs），然后将这些数据添加到DOM中，尝试按照先前的答案的几个例子，但似乎无法得到DOM元素可点击，虽然它似乎被添加为链接。所以，已经退后一步并试图在点击另一个时添加一个新元素并且也无法使其工作 - 在jsfiddle中尝试过，代码的基本示例如下所示 - 当点击getsearchresults时，显示a href在searchresults div中，但是当点击时不会触发.clicakable_search处理程序。

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');
    });
   });

Answer 1

这是因为它在绑定时不存在于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 ');
        });
    });
});

Answer 2

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

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

您还可以在http://jsfiddle.net/Mdv7A/

查看演示

更新

正如@wirey所说，你可以用.on()击退.live（），如下所示：

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

http://jsfiddle.net/Mdv7A/3/

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

2 个答案:

更新