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

【问题标题】：Onclick event not triggered on span elements appended after AJAX call在 AJAX 调用后附加的 span 元素上未触发 Onclick 事件
【发布时间】：2015-06-02 06:03:31
【问题描述】：

我正在使用 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);

    });

  });

在 AJAX 调用的帮助下附加的 span 元素不会触发 onclick 事件。之前存在于 html 中的 span 元素正在响应 onclick 事件。我该怎么办？

【问题讨论】：

改用.on：api.jquery.com/on

标签： javascript jquery html css ajax

【解决方案1】：

问题是您正在尝试侦听尚不存在的元素。解决方案是使用事件委托，并监听父元素：

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

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

【讨论】：