這是關於jQuery的'追加'，我想知道爲什麼以及如何解決它

首先，有我寫的代碼。這是關於jQuery的'追加'，我想知道爲什麼以及如何解決它

<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

爲什麼我點擊第一個取消按鈕，下次我點擊按鈕，當然，似乎有兩個div actually.I只想一個DIV。如何解決這個問題？

來源

2016-08-01 lifeng1893

不要多次點擊#btn加event-handler。

綁定click處理程序「肯定」和「取消」出單擊處理爲「#btn」

$(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(); 
 
    }); 
 
})

.popup { 
 
    display: none; 
 
}

<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>

如果元素pop-up是動態生成的，請使用Event delegation

$(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(); 
 
    }); 
 
})

.popup { 
 
    display: none; 
 
}

<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>

來源

2016-08-01 12:30:15 Rayon

但彈出框是形式，也有一些投入，我想與在div顯示文本填寫。它是一樣的嗎？ – lifeng1893

@ lifeng1893 - 動態創建'form'中的元素嗎？或者他們存在於DOM中但處於隱藏狀態？ – Rayon

我試過了，但它還沒有工作，因爲彈出窗口中還有一個編輯按鈕，我不知道如何描述它。謝謝。@ Rayon – lifeng1893

這是關於jQuery的'追加'，我想知道爲什麼以及如何解決它

回答

相關問題