ajax 加载的 html 中的多个 jQuery 插件实例

Question

我在 ajax 加载的 html 中使用多个 Blueimp File Upload 插件：

$('.edit').click(function(){
    $( "#details" ).show();
    $('#details div').html(ajax_spinner).load(script.php, "parameters");
});

因此，当您单击 class="edit" 时，会显示一个新的 div id="details"（但它在 document.ready 时 在 DOM 中）并且 script.php 返回一个表单 ID ="upload"（它从不在“查看源代码”中可见，尽管它在页面中..？

处理 在 document.ready 之后添加的 html 的规则/良好做法是什么？

所以现在这个“虚拟 DOM”中有一个新元素：

<form id="upload" method="post" action="other_script.php" enctype="multipart/form-data">

  <div id="drop">
    DROP HERE <small>Image .png or .jpg</small>
    <a class="btn mr_button">Browse</a>
    <input type="file" name="upl" />
  </div>
  <ul id="mr_uploaded_files_ul">
    <!-- The global progress bar -->
    <div id="progress" class="progress">
      <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The file uploads will be shown here -->
  </ul>
</form>

当我尝试对 DOM 的这个“不可见”部分采取行动时：

$('#drop a').click(function(){
    alert('Nope. Nothing');
});

只有当我

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

但我需要的不仅仅是警报。整个$('#upload').fileupload({ ... }) 回调套件没有被执行，可能是因为这个DOM“存在”问题。顺便说一句，我在其他页面中使用这个实现，在普通的现有 DOM 上，它可以工作。

我如何处理那些新生成的 DOM 元素？

Answer 1

为您的load 调用添加一个回调函数，然后初始化您的表单。

$('#details div').html(ajax_spinner).load(script.php, "parameters", function() {
    $('#upload').fileupload({ ... });
});

当您使用 jQuery 选择器时，例如 $('#upload')，这些元素必须已经存在。上传表单在加载之前不存在，因此选择器在加载完成之前返回空。

警报起作用的原因

$(document).on('click', '#drop a', function() {
    alert('Ah, this works');
});

是由于事件委托。在这里阅读更多：http://learn.jquery.com/events/event-delegation/