我正在使用隐藏功能,它允许我隐藏页面中的多个元素。
隐藏框是这样的:
<div class="box">
<a href='javascript:setHide("Element_1")' class="button element_hide">Hide Box 1</a>
</div>
<div class="box">
<a href='javascript:setHide("Element_2")' class="button element_hide">Hide Box 2</a>
</div>
而 js 是:
$('.element_hide').click(function() {
$(this).closest('.box').hide(300);
});
function setHide(ObjID) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var p_str = "p="+ObjID;
xmlhttp.open("POST","/hide/",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(p_str);
}
现在我想添加一个确认框;如果我点击“隐藏框链接”,我想显示以下消息:“你真的要隐藏框吗?”。所以我尝试将 js 部分更改为:
$('.element_hide').click(function() {
$(this).closest('.box').hide(300);
});
function setHide(ObjID) {
if (confirm("Do you really want to hide the box?")) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var p_str = "p="+ObjID;
xmlhttp.open("POST","/hide/",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(p_str);
}
}
但不幸的是,它不起作用,因为即使我点击“取消”(在确认框中),该框仍然消失。
有什么想法吗?非常感谢!
最佳答案
这是因为您有两个单独的事件处理程序用于隐藏和确认,而用于隐藏的事件处理程序始终运行。第一个事件使用 href='javascript:setHide("Element_1")'
设置,第二个事件使用 jQuery 的 $('.element_hide').click
设置。
将所有内容移动到通用处理程序中:
$('.element_hide').click(function() {
if (confirm("Do you really want to hide the box?")) {
var xmlhttp
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var ObjID = $(this).data('hide');
var p_str = "p=" + ObjID;
xmlhttp.open("POST", "/hide/", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(p_str);
$(this).closest('.box').hide(300);
}
});
HTML 部分将变为:
<div class="box">
<a data-hide="Element_1" class="button element_hide">Hide Box 1</a>
</div>
<div class="box">
<a data-hide="Element_2" class="button element_hide">Hide Box 2</a>
</div>
请注意,如何使用数据属性 (data-hide="Element_1"
) 将 ObjID
传递给事件处理程序。
关于javascript - 在现有隐藏功能中添加 jQuery 删除确认框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48405233/