Удалить элемент при нажатии с помощью JQuery

Question

Я создаю новое поле ввода с JQuery, которое включает кнопку удаления. Кнопка удаления работает на исходном элементе, но не работает на тех, которые были созданы с помощью JQuery.

документ после того, как два новых поля электронной почты добавил

<fieldset> 
       <legend>Send Email</legend> 
       <label>Emails(s) to send notice to.</label> 
       <p> 
        <input type="email" name="emails[]" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><span class="btn_orange"><a href="#" class="remove_field">x</a></span> 
       </p> 
       <p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p> 
        <span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span> 
       </p> 
       <p> 
        <span class="btn_orange"><a class="ui-button">Send Email</a></span> 
       </p> 
      </fieldset> 

Script

<script type="text/javascript"> 
    $(document).ready(
     function() { 
      $("#importbutton").click(function() { 
       $("#ProgressBarImg").show(); 
       $.get('@Url.Action("Import", "Import")', {}, 
       function (data) { 
        $('body').html(data); 
        $('#ProgressBarImg').hide(); 
       }); 
       $("#importbutton").removeAttr("href"); 
      } 
      ); 

      var dialog = $("#emailSection").dialog({ 
       autoOpen: false, 
       height: 400, 
       width: 475, 
       modal: true 
      }); 

      $('#emailButton').click(function() { 
       $(dialog).dialog("open"); 
       $('#emailButton').removeAttr('href'); 
      }); 
      $('.add_email_button').closest('p').click(function() { 
       var html = '<p><input type="email" name="emails[]" /><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p>'; 
       $(html).insertBefore($(this)); 
      }); 

      $('a.remove_field').closest('p').click(function() { 
       $(this).remove(); 
      }); 
     } 
    ); 
</script> 

Answer 1

Вы Установка событие на элементе, который на первой странице. После того, как вы добавите новые элементы, новые элементы не имеют обработчика, вы можете добавить его, если вы добавите его, но это лучший способ.

Используйте событие делегации: http://jsfiddle.net/mendesjuan/4my1dhw1/

$(document).on('click', 'a.remove_field', function() { 
    $(this).closest('p').remove(); 
}); 

Это означает, что вы слушаете за клики по всему документу, но фильтрование только те, которые вам интересны

Второе преимущество заключается в том, что вам. не требуется отдельный обработчик для каждого элемента, сохраняя вашу память.

Код, который я разместил, отличается по своему поведению от того, что у вас было, для чего требуется, чтобы вы нажмете x. Ваш код будет удаляться, когда вы нажимаете в любом месте в <p>. Причина, по которой я изменил ее, заключается в том, что нет селектора CSS, который имитирует то, что делает closest('p'), то есть селектор CSS не поднимается по дереву. Однако у меня, кажется, больше смысла, и вы, вероятно, были using closest('p') только потому, что хотите удалить весь <p>, но вы можете сделать это изнутри обработчика.

Answer 2

Для элементов, которые были добавлены после загрузки страницы, вы должны использовать:

$('body').on('click', '.classSelector', function(e) { 

});