jQuery UI：通过AJAX加载内容后重新初始化函数

我几天来一直在寻找这个问题的答案，虽然我找到了问题的大部分答案，但仍然有一段我的代码在添加AJAX调用之前没有工作。

一些背景：我正在创建一个Web应用程序作为RPG角色生成器。 首先发生的事情之一是我创建jQuery UI微调器小部件来调整统计分数。 在stop事件中，我的代码运行一个函数，该函数根据switch case检查当前数字，以设置一个值，从初始池中添加或减去多少个点（Point-Buy系统，对于任何知道这些事情的人）：

function calcPtsLeft() { var ptssum = new Number(); var ptsmax = new Number($("#maxpoints").val()); var pbstr = pointBuy($strsc.val()); var pbdex = pointBuy($dexsc.val()); var pbcon = pointBuy($consc.val()); var pbint = pointBuy($intsc.val()); var pbwis = pointBuy($wissc.val()); var pbcha = pointBuy($chasc.val()); var ptssum = pbstr + pbdex + pbcon + pbint + pbwis + pbcha; ptsleft = ptsmax - ptssum; $("#ptsleft").val(ptsleft); }; calcPtsLeft(); 

这段代码运行正常，直到我决定使用AJAX调用将各种页面动态加载到#content div中。 在进行AJAX调用以加载我的角色生成器之后，我的小部件根本没有显示出来。 我发现这是由于委托问题，所以我将我的所有小部件初始化收集到一个函数中：

 function initGenWidgets() { //sets CSS for input/label items from jQuery UI set $("#slider input:text, #slider label, #remaining input:text, #remaining label, #charName, #charAge") .addClass("ui-spinner ui-spinner-input"); //initialize jQuery UI button widget $("button").button(); //initialize jQuery UI radio buttonset widget $("#genderbuttons").buttonset(); //initialize jQuery UI menu widget $("#raceradio").menu(); //initialize jQuery UI vertical tabs $("#char-gen").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); $("#char-gen li").removeClass("ui-corner-top").addClass("ui-corner-left"); //initialize jQuery UI spinner widget for age $("#charAge").spinner({ icons: { down: "ui-icon-minus", up: "ui-icon-plus" } }); //initialize jQuery UI spinner widget for stats $(".statspinner").spinner({ min : 7, max : 18, icons : { down : "ui-icon-minus", up : "ui-icon-plus" }, stop: function(event, ui) { calcPtsLeft(); } }); //initialize jQuery UI slider widget for point-buy allotment $("#pointslider").slider({ value: 20, min: 15, max: 40, step: 5, slide: function(event, ui) { $("#maxpoints").val(ui.value); calcPtsLeft(); } }); }; 

我现在按如下方式进行AJAX调用：

 //function to load php files into content div function loadContent($page){ $("#content").load($page+' > *', function(response, status){ success: initGenWidgets(); }); }; //nav links load files into content div $(".menulink").on("click", function(e){ e.preventDefault(); loadContent($(this).attr("href")); }); 

一切似乎都很好，但是当我测试小部件时，似乎我的微调器不再在停止时执行calcPtsLeft()函数。 滑块用于在我滑动后更新#ptsLeft值（稍后修复），但是微调器根本不更新值。

我在这里做错了什么，或者根本不在这里做什么？ 任何帮助将不胜感激。

Answer 1

jQuery .load() ：

脚本执行

使用不带后缀选择器表达式的URL调用.load() ，内容将传递给。 在删除脚本之前的html() 。 这将在丢弃之前执行脚本块。 但是，如果使用附加到URL的选择器表达式调用.load() ，则在更新DOM之前会删除脚本，因此不会执行脚本。 两种情况的一个例子如下所示

.load()文档的一小部分但重要的部分！ 如果你真的想执行它们，你可能不得不做某种eval() ，或丢弃.selector

例：

这里，作为文档一部分加载到#a中的任何JavaScript都将成功执行。

 $( "#a" ).load( "article.html" ); 

但是，在以下情况中，加载到#b的文档中的脚本块将被删除而不执行：

 $( "#b" ).load( "article.html #target" ); 

可能解决方案

好吧，经过测试 – 我决定实际上采取将function添加到窗口的步骤，因为它是通过许多脚本传递函数和方法的最佳方式。 这个，希望修复有未声明的函数被声明，因为你在不同的脚本和命名空间。

Main.php

someScript.js