Javascript 在jquery中创建的div内的按钮未触发

我有jquery代码：

$("#forcedcancel").on("click", function(e){
    e.preventDefault();
    $("#forceDialog").remove();

    // get the screen height and width  
    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    // calculate the values for center alignment
    var dialogTop =  (maskHeight/3) - 20;  
    var dialogLeft = (maskWidth/2) - 200; 

    var forcedialog = "";
    forcedialog += '<div id="forceDialog" style="margin:'+dialogTop+'px 0 0 '+dialogLeft+'px;z-index:10;position:absolute;border: 1px #000 solid ;padding: 20px 20px 20px 20px;background-color:#fff">';
    forcedialog += '<h3>Reason for force cancelling the lesson</h3>';
    forcedialog += '<p><textarea id="forcereason" style="width:475px;height:121px"></textarea><p>';
    forcedialog += '<button id="submitforce" class="btn btn-primary">Submit</button><button id="cancelforce" class="btn btn-danger">Cancel</button>'
    forcedialog += '</div>';

    $('body').prepend(forcedialog);
});

$("#forceDialog").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

$（“#强制取消”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“#forceDialog”）.remove（）；
//获取屏幕的高度和宽度
var maskHeight=$（document.height（）；
var maskWidth=$（window.width（）；
//计算“中心对齐”的值
var dialogTop=（maskHeight/3）-20；
var dialogLeft=（maskWidth/2）-200；
var forcedialog=“”；
forcedialog+=''；
forcedialog+=“强制取消课程的原因”；
forcedialog+=''；
forcedialog+=“提交取消”
forcedialog+=''；
$（'body'）.prepend（forcedialog）；
});
$（“#强制对话框”）。在（“单击”，“取消强制”，函数（）上）{
警报（“此处”）；
$（“#forceDialog”）.hide（“slow”）；
});

当我单击id=“forcedcancel”按钮时，将显示id=“forceDialog”的自定义对话框。但是，当我在该分区内单击“取消”按钮时，警报（“此处”）不会触发。我想我太累了，没有注意到这个错误（

试试：

$(document).on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

尝试：

---

即使您正在使用事件委派，您尝试向其添加处理程序的元素（

#forceDialog

）也会动态创建…因此您的单击处理程序不会注册

使用事件委派时，执行代码时，处理程序所附加到的元素（在$（…）中使用的元素）必须存在于dom中……在这种情况下，由于

forceDialog

元素被添加到

body

，您可以将处理程序绑定到

文档

或

body'

元素

$(document).on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

即使您正在使用事件委派，您尝试向其添加处理程序的元素（

#forceDialog

）也会动态创建…因此您的单击处理程序不会注册

使用事件委派时，执行代码时，处理程序所附加到的元素（在$（…）中使用的元素）必须存在于dom中……在这种情况下，由于

forceDialog

元素被添加到

body

，您可以将处理程序绑定到

文档

或

body'

元素

$(document).on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

您正在使用委托处理程序，但是主选择器需要是页面加载时出现的元素，而

#forceDialog

不是。最近的静态元素似乎是

body

，请尝试以下操作：

$("body").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

也可以考虑使用<代码>类< /代码>属性，而不是<代码> ID>代码>，因为您的当前代码将在多个单击之后留下具有相同的<代码> ID 的多个元素。

您使用的是委托的处理程序，但是主选择器需要是页面加载时出现的元素，WHI。ch

#forceDialog

不是。最近的静态元素似乎是

body

，请尝试以下操作：

$("body").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

也可以考虑使用<代码>类< /代码>属性，而不是<代码> ID>代码>，因为您的当前代码在多次单击之后会给您留下多个元素，具有相同的<代码> ID <代码>。

< p>在整个文档

中找到它。

$("body").on("click", "#cancelforce", function(){
alert("HERE");
$("#forceDialog").hide("slow");
});

---

在整个文档中找到它

$("body").on("click", "#cancelforce", function(){
alert("HERE");
$("#forceDialog").hide("slow");
});

---

您必须将处理程序附加到主体，并检查已单击的动态添加元素选择器

深入阅读：

因此，请尝试使用：

$("body").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

您必须将处理程序附加到主体，并检查已单击的动态添加元素选择器

深入阅读：

因此，请尝试使用：

$("body").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});

---

HTML在var forcedialogHTML在var forcedialogYou中非常出色。非常感谢您，先生！我可以问一下委托处理程序是什么意思吗？我想以后避免它。：@Taiga没问题，很乐意帮助：）委托处理程序意味着事件附加到一个元素，而该元素本身不会直接触发事件。在我编写的示例中，事件附加到

body

，但由

#cancelForce

触发，因为您非常出色。非常感谢你，先生！请问委托经办人是什么意思？我想在将来避免它。：）@Taiga没问题，很乐意帮助：）委托处理程序意味着事件附加到一个元素，而该元素不会直接触发事件本身。在我编写的示例中，事件附加到

body

，但由

#cancelForce

触发！解释得很好。谢谢你，先生！：）明亮的解释得很好。谢谢你，先生！：）