3

私はこの質問に対する答えを数日間ずっと探していました.私の問題に対する答えのほとんどを見つけましたが、AJAX呼び出しを追加する前と同じように機能していないコードの一部がまだあります. .

背景: RPG キャラクター ジェネレーターとして機能する Web アプリを作成しています。最初に行うことの 1 つは、統計スコアを調整するための jQuery UI スピナー ウィジェットを作成することです。停止イベントで、私のコードは、現在の数を switch ケースと照合してチェックし、初期プールに追加または減算するポイント数を値に設定する関数を実行します (これらのことを知っている人のためのポイント購入システム)。

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()スクリプトが削除される前。これにより、スクリプト ブロックが破棄される前に実行されます。ただし、 URL に追加されたセレクター式で が呼び出された場合 .load()、スクリプトは DOM が更新される前に削除されるため、実行されません。両方のケースの例を以下に示します

.load()!のドキュメントの小さいながらも重要な部分です。本当にそれらを実行したい場合は、おそらく何らかの操作を行うかeval()、破棄する必要があります.selector

例：

#aここでは、ドキュメントの一部としてロードされた JavaScriptが正常に実行されます。

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

ただし、次の場合、読み込まれるドキュメントのスクリプト ブロック#bは取り除かれ、実行されません。

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

考えられる解決策

さて、テストの後、実際に関数をウィンドウに追加するステップを実行することにしました。これは、多くのスクリプトを介して関数とメソッドを実行するための最良の方法だからです。これは、別のスクリプトと名前空間にいるため、修正で未定義の関数が宣言されていることを願っています。

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