在元素添加到DOM之前，将事件注册到元素中

To register an event to an element before element is added to DOM?

本文关键字：元素 注册 事件 之前 添加 DOM      更新时间：2024-04-27

元素#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);

您正试图在页面上找到#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/

您必须将它添加到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>

使用jQuery函数（如"delegate"或"on"）将事件绑定到元素，而不管元素是否存在于DOM中。以下是的示例

$( "body" ).on( "click", "#create_butt_1", function() {
   // Do something... 
});
相关文章：