javascript - 如果用户在我的 X 元素内单击，则不显示我的测试消息

Question

我有以下代码:

<div class="topImg">
    <div id="maisinfo"><p id="show">Test</p></div> //show test text
    <div class="topImgIcon">
       <img src="img/icon.png" class="topImgIcon"><span class="tittle">Icon</span>
    </div>
</div>

我希望用户点击我的<a class="imgClose">将显示我的<p>里面的元素 #maisinfo编号

我的 jQuery 代码:

  $(document).ready(function() { 
      $(".topImg").prepend('<div class="topImg"><a class="imgClose" href="javascript:window.close()"><img src="img/fechar.png"></a></div>');

      $("#maisinfo").hide(); 
      //show and dont show the <p> element dont work
      $("#show").bind("click",function(){
        $("#maisinfo").slideToggle("slow");
          return false;
        });
    });

如果用户在我的 X 元素内单击，我的 div“#maisinfo”将显示一种表单(在我的测试工作后，我的 X 元素位于我的 jQuery 内的 a href img src 内。

我的 jQuery 中的 X 元素:

Answer 1

您需要使用Event Delegation :-

$(document).on("click",'.imgClose',function(){
   $("#maisinfo").slideToggle("slow");
});

示例:-

$(document).ready(function() { 
  $(".topImg").prepend('<div class="topImg"><a class="imgClose" href="javascript:window.close()"><img src="/image/Ty4bj.jpg" height="20" width="20"></a></div>');

  $("#maisinfo").hide(); 
  
  //show and dont show the <p> element dont work
  $(document).on("click",'.imgClose',function(){
    $("#maisinfo").slideToggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topImg">
  <div id="maisinfo"><p id="show">Test</p></div><br>
  <div class="topImgIcon">
    <img src="img/icon.png" class="topImgIcon"><span class="tittle">Icon</span>
  </div>
</div>

注意:- 我使用了一个图标来向您表明它正在工作。