我正在使用bootstrap

Question

我正在使用bootstrap

以下是我的代码，用于动态提取Feed，然后通过在ID为“feeds”的分部内附加内容将其添加到页面上：

$.ajax({
    url: 'http://api.feedzilla.com/v1/categories/'+newsId+'/articles.json',
    type: 'GET',
    dataType: 'json',

    // to execute when successfully got json response
    success: function(response){
        $.each(response.articles, function(){
            var feed=   "<div class='media well'>"+
                            "<div class='media-body'>"+
                                "<h4 class='media-heading'>"+this.title+"</h4>"+
                                "<h6>"+this.publish_date+"</h6>"+
                                "<p>"+this.summary+"</p>"+
                                "<a href='"+this.url+"' target='_blank'>Continue Reading</a>"+
                            "</div><br><br>"+
                            "<button class='showinfo btn pull-right' id='info'>Show Info</button>"+
                        "</div>";

            $('#feeds').append(feed);
        });
    },

    // to execute when error
    error: function(jqXHR, textStatus, errorThrown){
        alert("Server error!");
    },

    // execute at last whether success or error
    complete: function(){

    }
});

正如您所看到的，我正在添加一个类'showinfo'以及id'info'来动态添加按钮。

现在，以下是我的事件处理程序：

    // SHOW INFO BUTTON CLICK HANDLER
    $('.showinfo').click(function(){
      alert('triggered');
    });

但它不起作用:( !!既没有id：$（'＃info'）。click（）!! 如果我没有动态添加按钮，那就完美了。为什么会这样？

Answer 1

使用on()：

$('#feeds').on('click', '.showinfo', function() {
    alert('triggered');
});

上述内容将 .showinfo 内与 #feeds 匹配的任何点击事件绑定到指定的回调函数。

另外，请注意在绑定时应该匹配的元素（在这种情况下为.showinfo）不需要（因此它也适用于动态添加的元素）。< / p>

Answer 2

您必须为动态添加的元素执行event delegation。

  // SHOW INFO BUTTON CLICK HANDLER
    $('#feeds').on("click",'.showinfo' ,function(){
      alert('triggered');
    });

为什么on（）有效？

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）的页面上。

Answer 3

.click适用于现有对象。如果要动态添加控件，请使用.on（或live - 但我已弃用）。它附加动态添加的对象的事件。

$('.showinfo').on('click', function(){
  alert('triggered');
});

在动态添加的按钮jQuery上注册click事件

我正在使用bootstrap

3 个答案: