如何动态附加部分并使用它们与JQuery追加其他部分?

时间:2017-12-05 13:47:32

标签: javascript jquery append

直截了当。我的.append()功能有问题。我需要附加一个部分,其中包含datetime-local和一个按钮到另一个部分,该部分是可见的。

这个新的附加按钮必须附加另一个部分,其中包含相同的元素,但具有不同的ID。代码的第一部分正在工作,但第二部分没有,我无法理解。我知道我的代码像大象一样优雅,但是......

感谢您的帮助!

$(document).ready(function() {
  var max_fields = 2;
  var wrapper = $(".input_1");
  var add_button = $(".add_1");

  var x = 1;

  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<section class="input_2">-.-.-<br/><input type="datetime-local"><a href="#" class="remove_1">Remove</a><br /> <button class="add_2">return</button> </section>');
    }
  });

  $(wrapper).on("click", ".remove_1", function(e) {
    e.preventDefault();
    $(this).parent('section').remove();
    x--;
  })
});

//level 2
$(document).ready(function() {
  var max_fields_2 = 2;
  var wrapper_2 = $(".input_2");
  var add_button_2 = $(".add_2");

  var x = 1;

  $(add_button_2).click(function(e) {
    e.preventDefault();
    if (x < max_fields_2) {
      x++;
      $(wrapper_2).append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="remove_2">Remove</a><br /> <button class="add_3">return 2</button> </section>');
    }
  });

  $(wrapper_2).on("click", ".remove_2", function(e) {
    e.preventDefault();
    $(this).parent('section').remove();
    x--;
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="input_1">
  <input type="datetime-local"><br/>
  <button class="add_1">return to icu</button>
</section>

3 个答案:

答案 0 :(得分:1)

您需要使用委托并在事件处理程序中查找动态添加内容的元素,例如&#34; .remove_1&#34;在你的代码中。

&#13;
&#13;
Route::any('import', 'Controller@import');

On controller write the following function.


public function import(Request $request)
    {
        $getData  = $request->all();
        $flag = $getData['flag'];
        $data = $getData['data'];

        $getModelData = ModelName::where('id',$flag);

    }
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果document.ready设置var wrapper_2 = $(".input_2"); $(".input_2")undefined不存在,则为$(document).ready(function() { var max_fields = 2; var wrapper = $(".input_1"); var add_button = $(".add_1"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<section class="input_2">-.-.-<br/><input type="datetime-local"><a href="#" class="remove_1">Remove</a><br /> <button class="add_2">return</button> </section>'); } }); $(wrapper).on("click", ".remove_1", function(e) { e.preventDefault(); $(this).parent('section').remove(); x--; }) }); //level 2 $(document).ready(function() { var max_fields_2 = 3; var x = 1; $('body').on('click', '.add_2', function(e) { e.preventDefault(); if (x < max_fields_2) { x++; $(".input_2").append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="remove_2">Remove</a><br /> <button class="add_3">return 2</button> </section>'); } }); $(".input_2").on("click", ".remove_2", function(e) { e.preventDefault(); $(this).parent('section').remove(); x--; }) });

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="input_1">
  <input type="datetime-local"><br/>
  <button class="add_1">return to icu</button>
</section>
&#13;
private Set<Account> accounts = new HashSet<>();
&#13;
&#13;
&#13;

答案 2 :(得分:0)

var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

开头编码:)