Речь идет о jquery 'append', я хочу знать, почему и как его решить

Во-первых, есть коды, которые я написал.Речь идет о jquery 'append', я хочу знать, почему и как его решить

<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, появляется два DIVs actually.I просто хочет один DIV. Как решить эту проблему?

источник

2016-08-01 lifeng1893

Не добавляйте event-handler столько раз, сколько вы нажимаете на #btn.

Bind 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 'append', я хочу знать, почему и как его решить

ответ

Смежные вопросы