Question

当用户在div外部点击时，如何使用jQuery this和class来影响div

我有一个我建立的搜索工作。我只是在用户点击结果或搜索框之外时，才能获取结果以删除结果。以下工作，但即使我单击搜索框或结果div，它也会清除结果。（我想这个问题与if语句中的“this”引用有关。）

$('#searchbox').keyup(function(){
  $.post("remote.php",{'func':'contactsearch','partial':this.value},function(data){
    $("#results").html(data);
     // erase the results when user clicks outside the search
     $('body').click(function(){
       if (!$(this).hasClass('nd_search')) { // erases results even when clicked inside result - why?
         $("#results").html('');
         $('body').unbind('click'); // remove event handler. add again when results shown.
        }
    });
   });
  });       
});

<div class="nd_search">
    <input id="searchbox" type="text" class="nd_search"/>
    <div id="results" class="nd_search"></div>
</div>

我也尝试过：

 $('body').click(function(event){
    if (!$(event.target).hasClass('nd_search')) { ...

其次，我宁愿让课程只包含div。我该如何更改if语句？

我查看了关于这个主题的其他帖子，这让我走得很远。我快到了

由于

Answer 1

将事件对象作为参数放入回调中，例如$（'body'）。点击（function（e）{然后再检查e.target。

由于事件在Javascript中的工作方式，您的方法很容易产生不良和不可预测的结果。

Answer 2

使用此逻辑

 $('body').click(function() {
 //Hide the menus if visible
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

Reference

Answer 3

$('body').click(function(evt) {
if($(evt.target).parents('.nd_search').length==0) {
    $("#results").html('');

}
});

当用户在div外部点击时，如何使用jQuery this和class来影响div

3 个答案: