默认情况下,页面上有 3 个点击事件(蓝色 X、蓝色 +、灰色 X)。每个人都会打开一个模式框。
每个模式框都有一个按钮。其中两个模态框,一个用于蓝色 X,一个用于蓝色 +,内部都有功能按钮。当我单击这些附加单击事件各自的按钮时,控制台消息将显示。我单击模式中的蓝色 X 或蓝色 + 按钮,然后收到控制台日志消息。好的。但这对灰色 X 不起作用。
另一个第三个模式框确实打开了,但里面的按钮不起作用。该按钮有一个 id=
remPostConfirm
此按钮不起作用的代码是:
showRemPost = function(id, url, lname) {
console.log("remPost1");
if (isAuth) {
$('#remPostConfirm').off('click').on("click", function(e) {
e.preventDefault();
console.log("remPost2");
});
$('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div id="remListConfirm" class="mini ui button">Remove</div >');
$('#remPostModal').modal('show');
} else {
deniedAccess();
}
}
另外两个有效的按钮具有基本相同的代码。
我不明白为什么这不再起作用,因为第三个模式按钮曾经起作用。如果您尝试单击灰色 X 来加载此模式,那么在“删除”按钮上,您将不会像其他两个按钮那样收到控制台日志消息(蓝色 X 和蓝色 +)。
这是一个 jsfiddle 示例供您测试和查看。
https://jsfiddle.net/qrmrfrhj/16/
抱歉,JS 包含在 HTML 中,如果我将其分开,我将无法使示例正常工作。如果您想在对我投反对票之前帮助我完成这项工作,那就太好了。谢谢。
感谢您的帮助。和平。
最佳答案
您在 showRemPost
中遇到两个问题。
首先,在添加到 #remPostModal
的 HTML 中,您有 id="remListConfirm"
,但您要在 # 上添加点击处理程序remPostConfirm
。 remListConfirm
已在 remListModal
中使用,您不应在此处重复它。
其次,在使用 .html()
创建按钮之前绑定(bind)点击处理程序。因此,当您创建按钮时,它没有单击处理程序。您需要更改订单。不需要 .off()
,因为全新的元素不会有点击处理程序。或者,您可以使用事件委托(delegate)。或者您可以像其他对话框一样执行此操作,但不覆盖原始 HTML 中的按钮。
showRemPost = function(id, url, lname) {
console.log("remPost1");
if (isAuth) {
$('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div id="remPostConfirm" class="mini ui button">Remove</div >');
$('#remPostConfirm').on("click", function(e) {
e.preventDefault();
console.log("remPost2");
});
$('#remPostModal').modal('show');
} else {
deniedAccess();
}
}
关于javascript - 辅助 onClick 事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41292261/