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

我在ajax加载的html中使用多个Blueimp文件上传插件：

$('.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”中有一个新元素：

   DROP HERE Image .png or .jpg Browse

当我尝试对DOM的这个“隐形”部分采取行动时：

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

只有我

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

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

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

在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/