0

我正在使用引导程序

以下是我动态获取提要的代码，然后通过在 id 为“提要”的部门中附加它们来将它们添加到页面上：

$.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“信息”。

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

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

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

4

3 回答 3

18

使用on()：

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

上面将任何匹配内部的任何元素上的任何点击事件绑定到指定的回调函数。.showinfo#feeds

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

于 2013-06-24T11:10:05.610 回答
4

您必须为动态添加的元素进行事件委托。

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

为什么 on() 有效？

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

于 2013-06-24T11:10:20.237 回答
2

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

$('.showinfo').on('click', function(){
  alert('triggered');
});
于 2013-06-24T11:13:56.487 回答