在AJAX加载HTML多的jQuery插件实例 [英] Multiple jQuery plugin instances in ajax-loaded html

问题描述

我使用的多个 Blueimp文件上传插件的AJAX加载的HTML：

I am using multiple Blueimp File Upload plugins in ajax-loaded html :

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

当你点击的东西类=编辑一个新的div ID =细节

所以显示（但它的是在DOM时的document.ready）和运行script.php返回表格的id =上传（即永远显示在查看源文件，虽然它的是的出现在页面..？

So when you click something class="edit" a new div id="details" is shown (but it was in the DOM when document.ready) and script.php returns a form id="upload" (which is never visible in "view source", although it is there in the page..?

什么是处理HTML规则/好的做法加入的在的的的document.ready？

What is the rule/good practice for dealing with html added after the document.ready?

所以现在在这个虚拟的DOM一个新的元素：

So now there is a new element in this "virtual 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中的这只看不见的部分行动：

And when I try to act upon this "invisible" part of the DOM :

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

只有当我

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

不过，我需要的不仅仅是一个警报。整个 $（'＃上传）。文件上传（{...}）不执行，可能是因为这个DOM存在的问题回调套件。顺便说一句我用这个非常实施其他页面，在普通现有的DOM，和它的作品。

But I need more than an alert. The whole $('#upload').fileupload({ ... }) callback suite is not executed, probably because of this DOM "existence" issue. BTW I use this very implementation in other pages, on plain existing DOM, and it works.

如何作用于这些新产生了DOM元素？

How can I act upon those newly-spawned DOM elements?

推荐答案

添加一个回调函数，你的负荷通话，然后初始化表单。

Add a callback function to your load call, and then initialize your form.

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

当你使用jQuery选择，比如$（'＃上传），这些元素必须的已的存在。上传表单不存在，直到它被加载后，让选择返回空直到负载完成后。

When you use a jQuery selector, like $('#upload'), those elements have to already exist. The upload form doesn't exist until after it's been loaded, so that selector returns empty until after the load finishes.

原因警报作品

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

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

这篇关于在AJAX加载HTML多的jQuery插件实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！