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

Question

我几天来一直在寻找这个问题的答案，虽然我已经找到了问题的大部分答案，但我的代码仍然有一段不像之前那样有效添加AJAX调用。

一些背景：我正在创建一个Web应用程序作为RPG角色生成器。首先发生的事情之一是我创建jQuery UI微调器小部件来调整统计分数。在停止事件中，我的代码运行一个函数，根据switch案例检查当前数字，以设置一个值，从初始池中添加或减去多少个点（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" );

可能的解决方案

嗯，经过测试 - 我决定实际上采取将功能添加到窗口的步骤，因为它是跨越功能的最佳方式。通过许多脚本的方法。这个，希望修复有未声明的函数被声明，因为你在一个不同的脚本＆amp;命名空间。

<强> Main.php

<script>

    //Create Rgp Object
    var Rgp = {
       calcPtsLeft : function() {
            console.log( 'Calculate Points' );
       },
       addPoints : function() {
            //Some addPoints Function
       }
    }; 

    //Add Object to Window      
    window.Rgp = Rgp;

    $('#begin').on('click', function() {
        $("#content").load( 'someScript.js', function( response, status ){
            success: initGenWidgets();
        });
    });

</script>

<强> someScript.js

<script>
function initGenWidgets() {
   $("#pointslider").slider({
       value: 20,
       min: 15,
       max: 40,
       step: 5,
       slide: function(event, ui) {
            $("#maxpoints").val(ui.value);
            Rgp.calcPtsLeft(); //Prints 'Calculate Points'
       }
   });
}
</script>