在AJAX调用后附加的span元素上未触发Onclick事件

Question

我正在使用Ajax检索一些数据并将其作为span元素附加。下面是代码的简化版本。

 function fetchPost() {

      $.getJSON(urlContent, function(data) {
        $.each(data.query.pages, function(i, item) {
            $("#feed").append("<span id='random'> randomtitle </span>");  

          }

        });



      });

      return 1;
}

$(document).ready(function(){

 $('span').click(function() {
    var text = $(this).text();
    alert(text);

    });

  });

onclick事件不会触发附加了AJAX调用帮助的span元素。之前在html中出现的span元素是对onclick事件的响应。我该怎么办？

Answer 1

问题是你正试图听取那些尚不存在的元素。 解决方案是使用事件委托，并监听父元素：

$("#feed").on('click', 'span', function() { /* ... */

http://api.jquery.com/on/