在元素触发之前绑定事件

发布于 2024-12-05 20:01:15 字数 749 浏览 1 评论 0原文

我有一个搜索结果 div，如果用户单击它之外的任何位置，我希望将其隐藏。它不是搜索条件 div 的子级。我遇到的问题是 .show() 似乎根本没有触发。我本以为 .hide() 仅在首次单击搜索按钮后才会触发。显然，当搜索结果 div 关闭时，我 .unbind() 事件。

有点难住这个，所以任何帮助将不胜感激。

这是一些示例代码。

function search(){
    $('#criteria').bind('click',function(){$('#results').hide();});
    $('#results').show();
    $('#results').html('some html from ajax call');
}

<div id=criteria>
    <input id=criteria1 /><input id=criteria2 /><input id=criteria3 />
    <!-- a whole page of input elements and a ajax lookup -->
    <input type=text id=lookup /><input type="button" onclick="search()" value="search" />
</div>
<div id=results></div>

原文

I have a search results div that I want to be hidden if the user clicks anywhere outside of it. It is not a child of the search criteria div.
The problem I'm having is that .show() does not seem to be firing at all. I would have thought that the .hide() only fires after the initial click on the search button. Obviously when the search results div is closed I .unbind() the event.

Kinda stumped on this one so any help would be greatly appreciated.

Here's some sample code.

function search(){
    $('#criteria').bind('click',function(){$('#results').hide();});
    $('#results').show();
    $('#results').html('some html from ajax call');
}

<div id=criteria>
    <input id=criteria1 /><input id=criteria2 /><input id=criteria3 />
    <!-- a whole page of input elements and a ajax lookup -->
    <input type=text id=lookup /><input type="button" onclick="search()" value="search" />
</div>
<div id=results></div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我爱人 2024-12-12 20:01:15

如果我理解正确的话你需要这样的东西

<script>
$(document).bind('click',function(){$('#results').hide();});

function search(e){    
  $('#results').show();
  $('#results').html('some html from ajax call');
  e.cancelBubble = true;
}
</script>

<div id=criteria>
<input id=criteria1 /><input id=criteria2 /><input id=criteria3 />
<!-- a whole page of input elements and a ajax lookup -->
<input type=text id=lookup /><input type="button" onclick="search(event)" value="search" />

If I understand you correctly you need something like this

<script>
$(document).bind('click',function(){$('#results').hide();});

function search(e){    
  $('#results').show();
  $('#results').html('some html from ajax call');
  e.cancelBubble = true;
}
</script>

<div id=criteria>
<input id=criteria1 /><input id=criteria2 /><input id=criteria3 />
<!-- a whole page of input elements and a ajax lookup -->
<input type=text id=lookup /><input type="button" onclick="search(event)" value="search" />

回复收藏 0 原文

~没有更多了~