Question

我刚刚阅读了一些关于使用on()将事件附加到动态创建的html元素的线程。我想出了这个示例（FIDDLE），尝试将click事件绑定到通过AJAX返回的元素div.clicktitle。 div元素具有数据属性，click事件应从中获取值，然后显示它们。但它似乎没有起作用。

对我有用的是定义click事件函数并将其放入Ajax成功回调中。 （FIDDLE）这是使click事件与AJAX返回元素一起使用的唯一方法吗？任何人都可以告诉我为什么.on()没有将事件附加到div.clicktitle？

Ajax之前的HTML

<div class="main"></div>
<div class="second"></div>

在Ajax之后它应该是

<div class="main"><div data-source="Hello" class="clicktitle"><h6>Title1</h6></div></div>
<div class="second"><div data-source="Hello" class="clicktitle"><h6>Title2</h6></div></div>

JS代码：

 $.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=",
    success: function (data) {
        var length = 0;
        var items = data.query.results.item;
        items = items.map(function(item){

        return '<div data-source="Hello" class="clicktitle"><h6 style="background:beige;">'+item.title+'</h6></div>';
        });
        var half = items.length/2;
        for(var i = 0; i < items.length; i++)
            if(i < half)
                $('.main').append(items[i]);
            else
                $('.second').append(items[i]); 
            length++;
        },

    error: function () {}        
});


    $('.clicktitle').on("click",function(){
      var datasource = $(this).data('source');
      $(this).text(datasource); 
    });

Answer 1

这应该适合你：

$('div').on("click",'.clicktitle',function(){
      var datasource = $(this).data('source');
      $(this).text(datasource); 
 });

Answer 2

问题是您尝试将侦听器直接添加到生成的元素。

您必须将它添加到父元素并使用on函数中的过滤器，如下所示：

    $.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=",
    success: function (data) {
        var length = 0;
        var items = data.query.results.item;
        items = items.map(function(item){

        return '<div data-source="Hello" class="clicktitle"><h6 style="background:beige;">'+item.title+'</h6></div>';
        });
        var half = items.length/2;
        for(var i = 0; i < items.length; i++)
            if(i < half)
                $('.main').append(items[i]);
            else
                $('.second').append(items[i]); 
            length++;
        },

    error: function () {}        
});

   $('.main, .second').on("click",".clicktitle",function(){ 
    var datasource = $(this).data('source');
    $(this).text(datasource); 
   });

JSFIDDLE

希望这一切可以帮助你

Answer 3

您的绑定无法正常工作，因为您的元素尚未存在，如果您接受@ Alen的建议，应该为您执行，但您将评估处理程序EVERYTIME点击进入任何地方。

您可以做的是在将元素写入DOM之前将处理程序附加到元素。

// Reusable event bheaviour
function clickBinding = function( event ){
    var $elem = $(event.target),
        datasource = $(this).data('source');
    $elem.text(datasource); 
}

// format item
function formatItem (item){
//setup elems
    var h6 = document.createElement('h6'),
        clickTitle = document.createElement('div');
    // config h6
    h6.style.background = 'beige';
    h6.innerHTML = item.title;
    clickTitle.appendChild(h6);
    // config clickTitle
    clickTitle.className = 'clicktitle';
    clicktitle.setAttribute('data-source', 'Hello');
    // Add event listeners
    if (clicktitle.addEventListener) {
        clicktitle.addEventListener ('click', clickBinding, false);
    } else if (clicktitle.attachEvent) {
        clicktitle.attachEvent ('onclick', clickBinding);
    }
    // return elem
    return clicktitle;
}

$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=",
    success: function (data) {
        var length = 0;
        var items = data.query.results.item;
        items = items.map(function(item){
            return formatItem(item);
        });
        var half = items.length/2;
        for(var i = 0; i < items.length; i++)
            if(i < half)
                $('.main').append(items[i]);
            else
                $('.second').append(items[i]); 
            length++;
        },

    error: function () {}        
});

on（）单击以将事件绑定到AJAX返回的元素

3 个答案: