我正在使用这段代码:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
这个HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
问题是，我有链接在div和当他们不再工作时，点击。
当前回答
根据文档，.blur()不仅仅适用于<input>标记。例如:
$('.form_wrapper').blur(function(){
$(this).hide();
});
其他回答
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
我觉得这样会容易得多。我是这样做的:
$(':not(.form_wrapper)').click(function() {
$('.form_wrapper').hide();
});
遇到同样的问题，就想出了这个简单的解决方法。它甚至可以递归工作:
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
对于像IPAD和IPHONE这样的触摸设备，我们可以使用下面的代码
$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
为我工作在所有设备上(2023);)
<section class="form-wrapper">
<div class="popup-container">
Popup Me
</div>
</section>
$('.form-wrapper').on('click', function(e) {
var pop_container = $(".popup-container");
// if the target of the click isn't the pop_container nor a descendant of the pop_container
if (!pop_container.is(e.target) && pop_container.has(e.target).length === 0) {
//you action here
pop_container.hide();
}
});
