0

我试图从服务器的 AJAX 调用中返回的一长串数据中提取一些 HTML（a 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');
    });
   });
4

2 回答 2

0

这是因为它在绑定时不存在于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 ');
        });
    });
});​
于 2012-10-19T15:19:01.383 回答
0

您可以使用.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/

于 2012-10-19T15:26:51.227 回答