Question

我有多个输入文字，名称不同。我附加了一个新的文本框，它正常工作。问题出现了，因为所有输入文本字段都有不同的名称。

如何使用一个函数让它工作，而不必为每个输入创建一个？

$(document).ready(function() {
    var max_fields3      = 30; //maximum input boxes allowed
    var wrapper3         = $(".input_fields_wrap12"); //Fields wrapper
    var add_button3      = $(".add_field_button11"); //Add button ID
    var wrapper6         = $(".input_fields_wrap11"); //Fields wrapper
    var x = 1; //initlal text box count
    $(add_button3).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields3){ //max input box allowed
            x++; //text box increment
            $(wrapper3).append('<div>   <input type="text" class="pets" name="super_stars_winner#CurrentRow#" size="35"  > <a href="#" class="remove_field"> Remove</a></div>'); //add input box


        } 
          $(document).ready(function() {
        $('.pets').autocomplete({
            source: function(query, response) {
                $.ajax({
                    url: "search.cfc?method=queryNames&returnformat=json",
                    dataType: "json",
                    data: {
                        searchPhrase: query.term
                    },
                    success: function(result) {
                        response(result);
                    }
                });
            }
        });
    });
    });

    $(wrapper3).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); 
        x--;
    })
     $(wrapper6).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); 
        x--;
    })
});

Answer 1

您可以使用$(document)代替$(wrapper3)

如果您希望增加特异性，可以为多个类创建相同的事件。

选项1

$(document).on('click', '.remove_field', function(e){
    //any class with .remove_field will trigger when clicked
});

选项2

$(document).on('click', '.input_fields_wrap12 .remove_field, .input_fields_wrap11 .remove_field', function(){
   //either an element with .remove_field as a child of .input_fields_wrap12
   //or .input_fields_wrap11 will jump in here when clicked
});

请注意第二个选项中的,。它位于选择器引号''内。您可以使用它来选择多个字段来执行相同的事件功能

Answer 2

以下内容允许事件冒泡到表单级别。然后它将更改应用于触发事件的按钮的父div（$ parent）。

＆＃13;

$('form').on('click', function ($event) {
    $event.preventDefault();
    var $target = $($event.target);
    var $parent = $target.parent();
    if ($target.hasClass('Add')) {
        var $div = $('<div>').insertAfter($parent);
        $parent.clone().appendTo($div);
    } else {
        $parent.remove();
    }
});

＆＃13;

    <form>
        <div>
            <input type="text" />
            <button class="Add">Add</button>
            <button class="Remove">Remove</button>
        </div>
    </form>
    <form>
        <div>
            <input type="text" />
            <button class="Add">Add</button>
            <button class="Remove">Remove</button>
        </div>
    </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何附加到具有不同名称的多个输入？

2 个答案: