Question

我有一个div，当点击一个新的div时会显示 - 当显示这个新的div并希望通过点击它来关闭时，它会触发。

这是我的小提琴

$(document).ready(function() {
    var counter = 0;
    $('.one').click(function() {
    if (counter <= 0) {
        $('p').append("<p id='closingCross'>X</p>");
        counter++;
    }
});
  $('#closingCross').click(function() {
    //This is not firing?!
    alert("hello");
  });
});

我只是希望它在点击时关闭，但它什么都不做？

我在这里做错了什么？

干杯，

本。

P.S - 看看更新的小提琴

https://jsfiddle.net/foba81eb/4/

当我.hide（）然后点击取回它时它不起作用!!

Answer 1

HTML：

<div class="one">
<p>
hello world
</p>
<p id='closingCross' style="display:none">X</p>

</div>

JS：

$(document).ready(function(){


var counter=0;

$('.one').click(function() {
if(counter <= 0){
  $('p').show();
  counter++;
}
 });

$('#closingCross').click(function() {
    alert("hello");
 });


});

Answer 2

使用delegated event handler。

变化：

$('#closingCross').click(function() {

为：

$(document).on('click', '.closingCross', function(e) {

摘录：

$(document).on('click', '.closingCross', function(e) {
  console.log("hello");
});


$(document).ready(function(){

  var counter=0;

  $('.one').click(function() {
    if(counter <= 0){
      $('p').append( "<p class='closingCross'>X</p>" );
      counter++;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="one">
    <p>
        hello world
    </p>


</div>

Answer 3

您需要做的就是将事件附加到DOM中已创建的元素。

$('#topp').on('click', 'p', function() {
    alert("hello");
 });

你的工作范例： https://jsfiddle.net/foba81eb/4/

jquery追加并且无法单击附加的类

3 个答案: