Question

我尝试使用“.on”事件更改代码，因为我使用的是后来的generatet模态窗体。

我的修改是代码

JS代码

var next = 1;
//originalcode: $(".add-more").click(function(e){
$(document).on('click','.add-more',function(e){
    e.preventDefault();
    var addto = "#field" + next;
    var addRemove = "#field" + (next);
    next = next + 1;
    var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
    var newInput = $(newIn);
    var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
    var removeButton = $(removeBtn);
    $(addto).after(newInput);
    $(addRemove).after(removeButton);
    $("#field" + next).attr('data-source',$(addto).attr('data-source'));
    $("#count").val(next);  

         //original code: $('.remove-me').click(function(e){
         $(document).on('click','.remove-me',function(e){
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length-1);
            var fieldID = "#field" + fieldNum;
            $(this).remove();
            $(fieldID).remove();
        });
});

和HTML代码（由ajax在后面的generatet形式内）

<div class="container">
<div class="row">
    <input type="hidden" name="count" value="1" />
    <div class="control-group" id="fields">
        <label class="control-label" for="field1">Nice Multiple Form Fields</label>
        <div class="controls" id="profs"> 
            <form class="input-append">
                <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
            </form>
        <br>
        <small>Press + to add another form field :)</small>
        </div>
    </div>
</div>

对我而言，它仅适用于主页，而不适用于后期的generatet模式 - 我做错了什么？

Answer 1

问题是什么？它工作正常。

var next = 1;
//originalcode: $(".add-more").click(function(e){
$(document).on('click','.add-more',function(e){
    e.preventDefault();
    var addto = "#field" + next;
    var addRemove = "#field" + (next);
    next = next + 1;
    var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
    var newInput = $(newIn);
    var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
    var removeButton = $(removeBtn);
    $(addto).after(newInput);
    $(addRemove).after(removeButton);
    $("#field" + next).attr('data-source',$(addto).attr('data-source'));
    $("#count").val(next);  
});

         $(document).on('click','.remove-me',function(e){
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length-1);
            var fieldID = "#field" + fieldNum;
            $(this).remove();
            $(fieldID).remove();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
    <input type="hidden" name="count" value="1" />
    <div class="control-group" id="fields">
        <label class="control-label" for="field1">Nice Multiple Form Fields</label>
        <div class="controls" id="profs"> 
            <form class="input-append">
                <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
            </form>
        <br>
        <small>Press + to add another form field :)</small>
        </div>
    </div>
</div>

将代码更改为.on将无法正常工作

1 个答案: