0

私のHTMLヘッドには、次のスクリプトが含まれています。

<script id="mode" type="text/javascript" src="article.js"></script>

ボタンをクリックして、スクリプトのソースをcustomers.jsに変更し、次のようにします。

<script id="mode" type="text/javascript" src="customers.js"></script>

重要なのは、article.jsを自分のページに含めたくないので、を使用することはできないということ.append()です。

したがって、記事ボタン->含まれているarticle.jsのみをクリックし、顧客ボタン->含まれているcustomers.jsのみをクリックします。

この方法でjQueryを使用してこれを解決しようとしましたが、機能していないようです...：

$("#btArticle").click(function(){
  $("#mode").attr("src","article.js");
});

$("#btCustomers").click(function(){
  $("#mode").attr("src","customers.js");
});

私の間違いがどこにあるか知っていますか？

更新： customers.jsとarticle.jsに同じ名前のメソッドがあります。したがって、両方にonSave（）メソッドがあり、前に顧客ボタンをクリックしたときに、articles.jsのメソッドではなくcustomers.jsのonSave（）メソッドを実行する必要があります。

4

2 に答える 2

2

重要なのは、article.jsを自分のページに含めたくないので、を使用することはできないということ.append()です。

スクリプトがダウンロードされて評価されると、明示的に削除されない限り、スクリプトが残したものはすべて残ります。それらは要素自体にリンクされておらず、scriptそれを削除しても影響はありません。

周りに残っているものを取り除く唯一の方法は、article.jsそれが作成して保持するすべてのものを削除または上書きすることです。

具体的な例：

// article.js
var foo = "bar";
jQuery(function($) {
    $(".stuff").click(function() {
        alert("You clicked stuff!");
    });
});

上記のリストが処理された場合、それをロードした要素をarticle.js削除できます。これは、フックしたグローバル変数またはイベントハンドラーには影響しません。scriptfoo

アンロードできるスクリプトが必要な場合は、次のようなプロパティに割り当てることで、追加する単一のグローバルシンボルを持つモジュールパターンを使用するようにしますwindow。

// article.js
window.articleScript = (function() {
    var foo = "bar";
    jQuery(function($) {
        $(".stuff").bind("click.article", function() {
            alert("You clicked stuff!");
        });
    });

    function remove() {
        $(".stuff").unbind("click.article");
        try {
            delete window.articleScript;
        }
        catch (e) { // Early IEs throw incorrectly on the above
            window.articleScript = undefined;
        }
    }

    return {
        remove: remove
    };
})();

次に、次のようにして削除できます。

articleScript.remove();

質問に対するコメントを再確認してください。

たぶん、同じ名前の両方のファイルにメソッドがあることを述べておかなければなりません。

のグローバル関数宣言customers.jsと同じ名前を使用するグローバル関数宣言がarticles.jsある場合、をロードcustomers.jsすると、それらの関数が置き換えられます。

だからあなたがこれを持っているならarticles.js：

function foo() {
    alert("Articles!");
}

...そしてこれはcustomers.js：

function foo() {
    alert("Customers!");
}

そして、あなたはボタンを持っています：

<input type="button" onclick="foo();" value="Foo">

ロードしただけarticles.jsでロードしていない場合はcustomers.js、そのボタンをクリックすると「Articles！」が表示されます。次にロードする場合customers.js、ボタンをクリックすると「Customers！」が表示されます。

これは、イベントハンドラーがを呼び出す foo()ために機能しますが、イベントハンドラー自体はではありません foo。このonclick属性は、非表示のイベントハンドラーを作成します。同等のjQueryは次のようになります。

$("input[type='button'][value='Foo']").click(function() {
    foo();
});

実行するだけで、非常に異なることが行われることに注意してください。それは、その時点でイベントハンドラーとして指す.click(foo)関数をフックします。後で（ロードすることによって）ポイントを変更しても、古い関数がハンドラーとしてフックされているという事実は変わりません。foofoocustomers.js

FWIW、質問とコメントから、このページ/アプリの戦略をじっくりと確認することをお勧めします。このコードのインとアウトの交換などはすべて、設計上の問題のようです。

于 2012-05-30T12:53:29.900 に答える
0

実際にそれぞれのスクリプトをロードして実行しているのではなく、そのタグのソースを変更しているだけです。.getScript()適切なJavaScriptファイルをロードして実行するために使用します。

http://api.jquery.com/jQuery.getScript/

于 2012-05-30T12:53:53.817 に答える