为什么我使用'jQuery click event, after appending content'不起作用的方法

Question

这里我用jQuery版本3.1.1，为什么我用这个方法不起作用？

$('input[name="images-post[]"').on("click", 'input[name="images-post[]"]', function() {
  $('.menu-create-post .mdi-camera').append('<input type="file name="images-post[]" accept="image/*" multiple="multiple">');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="span-wrapper" style="display: inline-block;">
    <input type="file" name="images-post[]"/>
  </span>
</div>

请更正错误:D

Answer 1

代码中有多个错误。

1. 实时事件必须绑定到静态元素，因此$(static).on('event', dynamic, function () {})

2. 您没有尝试将输入元素附加到的元素。

3. type="file后，您的append "丢失

4. 使用 domReady

$(document).ready(function() {
  $(document).on("click", 'input[name="images-post[]"]', function() {
    $('.menu-create-post .mdi-camera').append('<input type="file" name="images-post[]" accept="image/*" multiple="multiple">');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="span-wrapper" style="display: inline-block;">
    <input type="file" name="images-post[]"/>
  </span>
</div>
<div class="menu-create-post">
  <div class="mdi-camera"></div>
</div>

Answer 2

正如@Justinas所说，您的 dom 中有多个错误。 单击时委托事件并不比文件输入的更改事件更好。顺便说一句，您应该根据静态 DOM 委派您的事件，以获得动态 DOM。

$(function(){
    $('.span-wrapper').on("click", '[name="images-post[]"]', function() {
    $('.mdi-camera').append('<input type="file" name="images-post[]" accept="image/*" multiple="multiple">');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <span class="span-wrapper" style="display: inline-block;">
    <input type="file" name="images-post[]"/>
  </span>
  <span class="mdi-camera"></span>
</div>

Answer 3

您还可以为单击创建绑定事件，并在需要时调用它。

function bindClick(){
     $('input[name="images-post[]"').unbind();
     $('input[name="images-post[]"').bind("click", 'input[name="images-post[]"]', function() {
         $('.menu-create-post .mdi-camera').append('<input type="file name="images-post[]" accept="image/*" multiple="multiple">');
     });
}