Question

首先，我写了一些代码。

<body>
    <a href="javascript:;" id="btn">add</a>
    <div class="panel">
        <div class="box"></div>
    </div>
    <div class="popup">
        <a href="javascript:;" id="sure">sure</a>
        <a href="javascript:;" id="cancel">cancel</a>
    </div>
    <script>
        $(function(){
            $('#btn').click(function(){
                $('.popup').show();
                $('#sure').on('click', function(){
                    var $box = "<div class='box'></div>";
                    $('.panel').append($box);
                });
                $('#cancel').on('click', function(){
                    $('.popup').hide();
                });
            });
        })
    </script>
</body>

然后，我做了一些步骤。

the result

为什么我首先单击取消按钮，然后下次单击Sure按钮，实际上会出现两个DIV。我只想要一个div。如何解决这个问题？

Answer 1

点击event-handler时，请不要多次添加#btn。

为{em>＆＃34;确定＆＃34; 和＆＃34;取消＆＃34; 的点击处理程序click处理程序>＆＃34;＃BTN＆＃34;

＆＃13;

$(function() {
  $('#btn').click(function() {
    $('.popup').show();
  });
  $('#sure').on('click', function() {
    var $box = "<div class='box'>Added</div>";
    $('.panel').append($box);
  });
  $('#cancel').on('click', function() {
    $('.popup').hide();
  });
})

＆＃13;

.popup {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="javascript:;" id="btn">add</a>
<div class="panel">
  <div class="box"></div>
</div>
<div class="popup">
  <a href="javascript:;" id="sure">sure</a>
  <a href="javascript:;" id="cancel">cancel</a>
</div>

＆＃13;

如果pop-up中的元素是动态创建的，请使用Event delegation

＆＃13;

$(function() {
  $('#btn').click(function() {
    $('.popup').show();
  });
  $(document).on('click', '#sure', function() {
    var $box = "<div class='box'>Added</div>";
    $('.panel').append($box);
  });
  $(document).on('click', '#cancel', function() {
    $('.popup').hide();
  });
})

＆＃13;

.popup {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="javascript:;" id="btn">add</a>
<div class="panel">
  <div class="box"></div>
</div>
<div class="popup">
  <a href="javascript:;" id="sure">sure</a>
  <a href="javascript:;" id="cancel">cancel</a>
</div>

＆＃13;

这是关于jquery＆＃39;追加＆＃39;，我想知道为什么以及如何解决它

1 个答案: