jquery - jQuery 中如何通过点击 body 来隐藏 div 元素？

Question

嗨，这是我的 html 代码:

<span id="transa_noua">Adauga transa noua +</span>
<div id="ad_transa" class="ad_transa2" style="display: none;overflow:auto;">
    <div style="float: left; margin-right:20px;">
        <label for="input_val_transa">Transa de plata</label>
        <input id="nume_transa" type="text"/>
    </div>
</div>

这是我的 JavaScript 函数:

$("#transa_noua").click(function(e){
    $("#ad_transa").show();
    e.stopPropagation();
});
$("body").click(function(e){
  if (e.target.className == "ad_transa"){
     alert("do't hide");  
  }else{    
        $('.ad_transa').css("display","none");
  }
});

所以，问题是我不想隐藏所有 ad_transa2 类元素。例如，当我单击输入时，包含 ad_transa2 类的所有 div 都会消失。我怎样才能做到这一点 ？

Answer 1

尝试这个解决方案。

$("#transa_noua").click(function(){
    $("#ad_transa").show();
});
$(document).on('click', function(){
    $('#ad_transa').hide();
});
$('#ad_transa, #transa_noua').on('click', function(e){
    e.stopPropagation();
});

Fiddle Demo