Question

我有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");
});

当我点击id =“forcedcancel”的按钮时，会显示id =“forceDialog”的自定义对话框。但是，当我单击该div内的取消按钮时，警报（“HERE”）不会触发。我太累了，不能注意到我猜的错误。：（

Answer 1

尝试：

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

Answer 2

即使您正在使用事件委派，您尝试添加处理程序的元素（#forceDialog）也会动态创建...因此您的单击处理程序不会被注册。

当您使用事件委托时，处理程序所附加到的元素（$（...）中使用的元素）必须在执行代码时存在于dom中...在这种情况下，因为{{1} }元素已添加到forceDialog，您可以将处理程序绑定到body或document元素

'body'

Answer 3

您正在使用委托处理程序，但主要选择器必须是页面加载时出现的元素，#forceDialog不是。最接近的静态元素似乎是body，所以试试这个：

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

此外，您可能需要考虑使用class属性而不是id，因为您的当前代码会在几次单击按钮后为您留下多个具有相同id的元素。< / p>

Answer 4

在整个文档中找到它

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

Answer 5

您必须将处理程序附加到正文并检查单击的动态添加的元素选择器。

深入阅读：http://api.jquery.com/on/

所以尝试使用：

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

在jquery内部制作的div内的按钮没有触发

5 个答案: