3

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

一些背景知识：我正在创建一个 Web 应用程序来充当 RPG 角色生成器。发生的第一件事是我创建 jQuery UI 微调器小部件来调整统计分数。在停止事件中，我的代码运行一个函数，该函数根据开关情况检查当前数字，以设置从初始池中添加或减去多少点的值（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 值（稍后将修复），但微调器根本不更新该值。

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

4

1 回答 1

4

jQuery .load():

脚本执行

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

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

例子：

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

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

但是，在以下情况下，正在加载的文档中的脚本块#b被剥离并且不被执行：

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

可能的解决方案

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

主文件

<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>
于 2013-10-17T18:17:49.490 回答