Question

第一次点击事件会发送一个API调用，返回多个搜索结果。

当点击'upvote'时，应该发生第二次点击事件，这是每个返回的搜索结果中的一个选项。

问题是，我似乎无法在搜索结果中选择upvote按钮，因为它们是在第一次单击事件之后创建的（通过克隆另一个元素）。

有人可以解释为什么会这样吗？

第一次点击活动的一部分：

success: function(json) {
  var reviews = json.reviews;

  $.each(reviews, function(i) {
    var critic = reviews[i].critic;
    var quote = reviews[i].quote;
    var score = reviews[i].original_score;

    $('#tile-demo').clone().removeAttr('id').removeClass('hidden')
    .find('.critic-name').text(critic).end()
    .find('.critic-score').text(score).end()
    .find('.critic-quote').text(quote).end()
    .appendTo('.review-grid');
  }); //end each loop

} //end success call

新来电，应该选择＃tile-demo的克隆：

$('.search-results').click(function(){
  var goodCritic = $(this).siblings('.critic-name').text();
  console.log(goodCritic);
});

Answer 1

使用On方法如下：

$('#containerId').on('click','upvotebuttons',function(){write your code here});

其中containerId是您呈现新数据的容器div的id，并将[upvotebuttons]替换为upvote按钮的[class name]。

Answer 2

Jeffrey Way刚刚遇到a quick screencast，提出了一个略有不同的解决方案。另一个答案很好 - 这只是另一种方式（仍然使用事件委托）。

$('#parent-of-target').click(function(e) {  

    if ( $(e.target).is('#target-element') ) {  
        alert('clicked');  
    }  
});

如何选择由另一个事件创建的DOM元素？

2 个答案: