jQuery .remove() not working for dynamic form

冷暖自知 提交于 2020-01-25 13:00:11

问题


I am creating a dynamic form that allows a user to add/remove text fields. While I can add text fields with no problem, I'm having difficulty removing specific text fields.

Whenever I add additional text fields (say a total of 5), and try to remove any of them except for the first one (say removing field 3). All of them disappear as if the page reloaded. It's as if my jQuery code doesn't run when "Remove Field" is pressed.

<form>
...
  <div id="answers">
    <div class="form-group" id="option1">
      <div class="col-xs-11 col-sm-9 col-md-6"> 
        <input class="form-control" id="answer" placeholder="Answer option">
      </div>
      <div class="col-xs-1 col-sm-1 col-md-1" style="line-height:36px;">
        <a href="" class="remove">Remove Field</span></a>
      </div>
    </div>
  </div>
...
</form>

 <div>
   <a href="" id="add">Add another field</a>
 </div>

jQuery

    <script>
        $(document).ready(function() {

            $( "#add" ).on( "click", function(event) {
                event.preventDefault();                 
                var options = $('#answers .form-group').length + 1;
                $( "#answers div:first" ).clone()
                    .attr('id', 'option' + options)
                .appendTo( "#answers" );

            });

            $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });


        });
    </script>

回答1:


Instead of this:

$( ".remove" ).on( "click", function(event) {

Try this:

$(document).on("click", ".remove", function(event) {



回答2:


Try this:

$( "body" ).on( "click", ".remove", function(event) {
      event.preventDefault();                 
      $(this).closest(".form-group").remove();
});

basically you can put any parent of the class remove (which is not dynamically generated) instead of body.




回答3:


With this:

$(document).ready(function() {
 $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

you are binding the listener to the click event on the "remove" item present on the page at load time.

Every other item added after that time will be without any binded listener.

You should either use the event delegation using the 3 parameters listener

$(document).ready(function() {
 $( "form" ).on( "click", ".remove" ,function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

The semantic of this declaration consist in binding the event on the full form (which exist at load time), but the event will propagate to the clicked .remove anchor.

If you are using a version of jquery older then 1.7, use delegate

The propagation, or the bubbling, of the events in javascript allow this behaviour.



来源:https://stackoverflow.com/questions/18837533/jquery-remove-not-working-for-dynamic-form

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!