first, there codes wrote.
<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> then,there steps did.
why click cancel button @ first, , next time click sure button, there appears 2 divs actually.i want 1 div. how solve problem?
do not add event-handler many times click on #btn.
bind click handlers "sure" , "cancel" out of click handler "#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>if elements in pop-up created dynamically, use 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>
Comments
Post a Comment