Javascript 在动态加载的表单中激活jquery ui小部件

激活jQueryUIWidgets以获取ajax加载并插入到文档中的html的最佳实践是什么

我是低调javascript的拥护者，并且坚信javascript访问的所有功能都应该在没有javascript的情况下可以访问。因此，在理想情况下，在弹出窗口中打开的每个表单都应该有单独的页面，并且指向它们的链接应该被基于javascript的ajax加载所取代

我发现此模式对于将另一页的一部分加载并插入当前文档非常有用：

$('#placeholder').load('/some/path/ #content>*');

或者让它更通用：

$('a.load').each(function() {
    $(this).load($(this).attr('href') + ' #content>*');
});

但是，我还想从动态加载的页面激活javascripts，以便不同的小部件能够正确运行

我知道，我可以将这些Java脚本添加到当前文档中，并在

.load（）

的回调中激活所有这些脚本，或者我可以使用

$.get（）

分别使用html和Java脚本获取一些JSON，但我想，可能有一个更优雅的通用解决方案

你推荐什么

---

顺便说一句，我在后端使用Django。

问题是您当前如何激活javascript。如果您正在执行以下操作：

$(document).ready(function() {
      $('a.foo').click(function() { ... });
  })

你可以考虑改变事物：

$(document).ready(function() {
      $('a.foo').live('click', function() { ... });
  })

---

这样，当加载新的DOM对象时，事件处理程序就会被附加

我所做的是使用jquery.ui小部件指定的“加载”选项。不幸的是，这没有很好的文档记录，因此您不会在此处看到该选项：例如，但您会在此处看到它：

在大多数情况下，您调用的每个方法都有一个可以设置的初始选项，这促使我尝试使用加载

在我自己的应用程序中，我有三层嵌套的选项卡，它们是通过AJAX动态创建的。为了动态应用每个选项卡的javascript，我使用了嵌套的加载函数，这些函数在加载文档时首先启动

因此，我的模板文件具有：

<script type="text/javascript" src="{{ MEDIA_URL }}js/tabs.js"></script>
<script type="text/javascript">
$(function() {  
    $('.overall_tabs').tabs({
        load: initializeOverallTabs
    });
});
</script>

function initializeOverallTabs(event, ui){
    ...
    $('.lvl_two_tabs').tabs({
        load: initializeTabLevel2
    });
    ...
}

function initializeTabLevel2(event, ui){
    ...
    // So on and so forth
    ...
}

此外，我建议在加载区域内工作时，使引用特定于该窗格。这在使用选项卡时非常重要。下面是我找到的最好的方法

在tabs.js文件中：

function initializeOverallTabs(event, ui){
   $panel = $(ui.panel);
   $panel.find('lvl_two_tabs').tabs(...);
}

---

我发现这个问题奇怪地巧合！我最近向几个开发人员解释了我的解决方案，以解决相同Jquery/Django环境下的相同情况。我希望这有帮助

我决定自己处理外部页面小部件的一种方法是解析另一个页面的HTML，搜索脚本并在当前页面中执行它们

例如，在另一个页面上有一个带有自动完成小部件的表单，它被加载并插入到此页面。应使用特定属性激活autocomplete小部件，如可用选项：

<script type="text/javascript">
//<![CDATA[
$(function() {
    $("#colors").autocomplete({
        source: ['red', 'green', 'blue', 'magenta', 'yellow', 'cyan']
    });
});
//]]>
</script>

//

然后在当前页面中，我可以使用以下脚本加载HTML，并额外收集其中的所有Javascript并执行它们：

var oRe = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
$('#placeholder').load(
    '/some/path/ #content>*',
    function(responseText, textStatus, XMLHttpRequest) { // <-- callback function
        var sScripts = "";
        responseText.replace(
            oRe,
            function($0, $1) {
                sScripts += $1;
                return $0;
            }
        );
        eval(sScripts);
    }
);

var oRe=/]*>（[\s\s]*？）/gm；
$（'#占位符'）。加载(
“/some/path/#content>*”，
函数（responseText、textStatus、XMLHttpRequest）{//我看不出你的小部件有什么不引人注目的地方。没有javascript它们如何工作？这是一个一般性的问题，而不是具体的问题。一些使用或不使用javascript的小部件可能是颜色选择器降级为文本输入字段、日历降级为文本输入字段、自动完成字段降级为选择字段、选项卡等等对自定义小部件而言，
.live（）
和
.delegate（）
是一个很好的解决方案，但不适用于jquery ui内部，也不适用于第三方小部件。