jQuery单击不适用于动态创建的元素

Question

我查看了SO上的其他解决方案，但这些问题似乎都无法解决我的问题。为了给你一些背景知识，昨天我试图按类选择所有DIV并存储他们的ID。 See this现在我有了ID，我想创建一些新元素并合并ID并能够点击这些新元素。我去JSFiddle给你看了一个演示，但疯狂的部分在那里，我的代码工作，但在我的应用程序（Chrome扩展）它没有。更疯狂的是，我已经在其他部分实施了jQuery点击事件而没有任何问题，所以我真的很困惑为什么它不能在这个特定情况下工作。这里的JSFiddle可以使用，但在我的应用中，它不会在点击时执行任何操作。谢谢你的帮助！我很抱歉发布了这么多（愚蠢）的问题。

HTML：

<div class="HA" id="k2348382383838382133"></div>
<div class="HA" id="k2344444444444444444"></div>
<div class="HA" id="k234543544545454454"></div>
<div class="HA" id="k2346787878778787878"></div>

JS：

var HAContainer = document.querySelectorAll('.HA');
var HALength = document.querySelectorAll('.HA').length;

    var id = [];
    var j = 0;

    $('.HA').each(function(){
        id[j++] = $(this).attr('id');
    });

for (var i=0; i<HALength; i++) {

    var HABtn, HABtnImg, HAImgContainer;

    HABtnImg = document.createElement("img");
    HABtnImg.src = ("http://www.freesmileys.org/smileys/smiley-laughing002.gif"); 
    HABtnImg.className = "ha-icon"; 

    HAImgContainer = document.createElement("div");
    HAImgContainer.setAttribute("id", 'HA-'+id[i] + '-container');
    HAImgContainer.appendChild(HABtnImg);

    HABtn = document.createElement("div");
    HABtn.className = 'ha-button';
    HABtn.setAttribute("id", 'HA-container');
    HABtn.appendChild(HAImgContainer);

    HAContainer[i].appendChild(HABtn);
    HAClick(id[i]);

}

function HAClick(id) {

    $('#HA-'+id+'-container').click(function() {
        alert("clicked on ID " + id);
    });
}

Answer 1

您必须委托您的活动才能使其与dinamically添加的元素一起使用：

$('body').on("click", '#HA-'+id+'-container', function() {
    alert("clicked on ID " + id);
});

我注意到了某些内容，并会采用更好的方法进行编辑：

变化：

HABtn.setAttribute("id", 'HA-container');

要：

HABtn.setAttribute("id", 'HA-'+id[i] + '-inner-container');
HABtn.setAttribute("class", 'HA-container');

而不是：

function HAClick(id) {
    $('#HA-'+id+'-container').click(function() {
        alert("clicked on ID " + id);
    });
}

只需在具有委托的事件中附加一次：

$('body').on("click", '.HA-container', function() {
    alert("clicked on ID " + $(this).attr('id'));
});

Answer 2

jsFiddle隐式选择您用于放置在onload事件处理程序中的javascript。

结果你的代码被onload事件处理程序包装起来，基本上看起来像这个

$(function(){
    //your code here
});

它在jsFiddle中工作的原因是因为脚本在加载DOM后正在执行，因此可以与DOM中的元素进行交互。在加载元素后，您的chrome扩展可能无法正常运行。

将javascript包装在document.ready快捷方式

中是明智的

id

鉴于此，您的代码中仍然存在一些问题。目前尚不清楚为什么你需要拥有嵌套的div结构，也许是因为css样式，但一个问题是id的重复。它们可能只是类名（我引用“HA-container”）。

jQuery提供了一种在构造函数中创建元素的简单方法，您可以在此处利用它。它将使您的代码更加简化和可读。

此外，您可以使用.data('id',value)存储容器元素的jquery对象引用中使用的$('.HA').each(function(){ var btn = $('<div class="ha-button HA-container">'); var cont = $('<div id="'+this.id+'-container">').data('id',this.id); cont.click(function(){ alert("clicked on ID " + $(this).data('id')); }); var img = $('<img src="http://www.freesmileys.org/smileys/smiley-laughing002.gif" class="ha-icon" />'); $(this).append(btn.append(cont.append(img))); });数据。这样你就可以立即使用另一个函数来分配click事件处理程序来分配它。

<强> jsFiddle Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="HA" id="k2348382383838382133"></div>
<div class="HA" id="k2344444444444444444"></div>
<div class="HA" id="k234543544545454454"></div>
<div class="HA" id="k2346787878778787878"></div>

AdListener()

Answer 3

我会重新编写它以利用jQuery：

for (var i=0; i<HALength; i++) {

    var HABtnImg = $('<img/>')
            .attr('src', 'http://www.freesmileys.org/smileys/smiley-laughing002.gif')
            .addClass('ha-icon');

    var HAImgContainer = $('<div/>')
            .attr('id', 'HA-'+id[i] + '-container')
            .append(HABtnImg);

    var HABtn = $('<div/>')
            .addClass('ha-button')
            .append(HAImgContainer);
            //don't use duplicate ID's here

    $(HAContainer[i]).append(HABtn);
}

之后如下所述附加事件：

$(document).on('click', '.ha-button', function(e){
   //your click code here 
   var id = $(this).find('div').attr('id');
   alert("clicked on ID " + id);
});