在將元素添加到 DOM 之前向元素注冊事件？

Question

元素#create_butt_1在被點擊時不做任何事情。 這僅在我將事件注冊到元素之前調用setTimeout時才有效。 為什么會發生這種情況以及將事件注冊到元素的另一種方法是什么？

content = "<div class='no_content_div' id='brief_cal_no_cont_div'><p>There is no events</p><p class='create_butt create_new_task' id='create_butt_1'>create</p><div>";
$('#create_butt_1').click(function(event){
    event.stopPropagation();
    var $addEventDialog = $('#add_event_dialog');
    showCenterDialog($addEventDialog);

}); 
$div.append(content);

Answer 1

您正在嘗試在頁面上找到#create_button ，但是從您的代碼中它尚未被附加。 嘗試在片段中創建 html，然后在其中搜索元素，之后您可以將其附加到頁面：

content = $("<div class='no_content_div' id='brief_cal_no_cont_div'><p>There is no events</p><p class='create_butt create_new_task' id='create_butt_1'>create</p><div>");
$('#create_butt_1', content).click(function(event){
    event.stopPropagation();
    var $addEventDialog = $('#add_event_dialog');
    showCenterDialog($addEventDialog);
}); 
$div.append(content);

這是一個示例小提琴：http: //jsfiddle.net/mx3csebd/

Answer 2

您必須先將其添加到 DOM，然后才能為事件偵聽器注冊它。 在沒有看到其余代碼的情況下，我假設$div是對頁面上div的引用，並且您正在使用 jQuery 將 HTML 附加到它。

如果是這種情況，您必須在將事件附加到div之后注冊該事件（從而將其添加到 DOM），如下所示：

content = "<div class='no_content_div' id='brief_cal_no_cont_div'><p>There is no events</p><p class='create_butt create_new_task' id='create_butt_1'>create</p><div>";
$div.append(content);
$('#create_butt_1').click(function(event){
    event.stopPropagation();
    var $addEventDialog = $('#add_event_dialog');
    showCenterDialog($addEventDialog);
});

 var $div = $("div"); var content = "<div class='no_content_div' id='brief_cal_no_cont_div'><p>There is no events</p><p class='create_butt create_new_task' id='create_butt_1'>create</p><div>"; $div.append(content); $('#create_butt_1').click(function (event) { event.stopPropagation(); var $addEventDialog = $('#add_event_dialog'); showCenterDialog($addEventDialog); }); function showCenterDialog(eventDialog){ alert(JSON.stringify(eventDialog)); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div></div>

---

另一種（我認為更好）的方法是創建實際的 HTML 元素並注冊事件，而不是使用 HTML 字符串：

var contentDiv = document.createElement("div");
contentDiv.setAttribute("class", "no_content_div");
contentDiv.setAttribute("id", "brief_cal_no_cont_div");

var par1 = document.createElement("p");
par1.innerText = "There is no events";

var par2 = document.createElement("p");
par2.setAttribute("class", "create_butt create_new_task");
par2.setAttribute("id", "create_butt_1");
par2.innerText = "create";

par2.onclick = function (event) {
    event.stopPropagation();
    var $addEventDialog = $('#add_event_dialog');
    showCenterDialog($addEventDialog);
};

contentDiv.appendChild(par1);
contentDiv.appendChild(par2);

 var $div = $("div"); var contentDiv = document.createElement("div"); contentDiv.setAttribute("class", "no_content_div"); contentDiv.setAttribute("id", "brief_cal_no_cont_div"); var par1 = document.createElement("p"); par1.innerText = "There is no events"; var par2 = document.createElement("p"); par2.setAttribute("class", "create_butt create_new_task"); par2.setAttribute("id", "create_butt_1"); par2.innerText = "create"; par2.onclick = function (event) { event.stopPropagation(); var $addEventDialog = $('#add_event_dialog'); showCenterDialog($addEventDialog); }; contentDiv.appendChild(par1); contentDiv.appendChild(par2); $div.append(contentDiv); function showCenterDialog(eventDialog){ alert(JSON.stringify(eventDialog)); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div></div>

Answer 3

使用 jQuery 函數（如“delegate”或“on”）將事件綁定到元素，無論元素是否存在於 DOM 中。 這是示例

$( "body" ).on( "click", "#create_butt_1", function() {
   // Do something... 
});