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

我會重新 - 寫一點t Ø利用的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); 
}); 

Answer 3

的jsfiddle隱式選擇您使用JavaScript來放置onload事件處理程序的內部。

當你的代碼是包裹着onload事件處理結果，並且基本上看起來喜歡這個

window.onload = function(){ 
    //your code here 
}; 

它工作在的jsfiddle的原因是因爲在腳本執行一旦DOM被加載並因此可以與它們在DOM中的元素進行交互。在元素加載完成後，您的Chrome擴展名可能不起作用。

這將是審慎的包裹你的javascript中的document.ready快捷

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

鑑於此，還有存在於你的代碼中的一些問題。目前還不清楚爲什麼你需要擁有嵌套的div結構，也許是因爲css樣式的結果，但是一個問題是id的重複。他們可能只是類名（我指的是「HA容器」）。

jQuery提供了一種在構造函數中創建元素的非常簡單的方法，您可以在這裏利用它。它將使您的代碼更加簡化和易讀。

此外，您可以使用容器元素的jquery對象引用中使用的id來存儲使用.data('id',value)的數據。這將使您在使用另一個函數內部立即分配click事件處理程序來分配它。

jsFiddle Demo

$('.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))); 
 
});

<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>