0

我有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 内的取消按钮时，alert("HERE") 不会触发。我太累了，没注意到我猜的错误。:(

4

5 回答 5

1

尝试：

$(document).on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});
于 2013-10-11T09:31:37.533 回答
1

即使您正在使用事件委托，#forceDialog您尝试添加处理程序的 element() 也是动态创建的……因此您的单击处理程序不会被注册。

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

$(document).on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});
于 2013-10-11T09:31:45.127 回答
1

您正在使用委托处理程序，但是主要选择器必须是页面加载时存在的元素，而事实#forceDialog并非如此。最近的静态元素似乎是body，所以试试这个：

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

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

于 2013-10-11T09:32:06.923 回答
1

在整个文档中找到它

$("body").on("click", "#cancelforce", function(){
alert("HERE");
$("#forceDialog").hide("slow");
});
于 2013-10-11T09:33:23.570 回答
0

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

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

所以尝试使用：

$("body").on("click", "#cancelforce", function(){
    alert("HERE");
    $("#forceDialog").hide("slow");
});
于 2013-10-11T09:36:24.027 回答