3

以下を実行すると、追加ボタンのクリックイベントハンドラーが機能しません（add.jsで定義されたクリックイベントと準備完了イベントがindex.jsに存在します）。

クリックイベントハンドラーとレディハンドラーをindex.jsに配置すると、クリックイベントが機能します（アラートポップアップ）。

私を助けてください。

注：#add_buttonは静的ボタンです（動的divではなくindex.phpに存在します。クリックする代わりにライブで試しましたが、それも機能しません）。

これは機能しません

<script src="js/index.js" type="text/javascript"></script>
<script src="js/add.js" type="text/javascript"></script>

index.js

$(document).ready(function() {
//code
});

add.js

$('#add_button').click(function(event){
 alert('hello');
});

これは、add.jsコンテンツが直接index.jsに配置されている場合に機能しますか？

$(document).ready(function() {
//code
$('#add_button').click(function(event){
 alert('hello');
});
});
4

4 に答える 4

6

それらが異なるファイルにあるからではありません。これは、clickイベントをフックするコードの実行が早すぎるためです。clickセットアップを内部readyに配置することで、「DOM準備完了」まで待機させることになります。ハンドラーにない場合は、readyすぐに実行されます。そのコードが要素の上にある場合#add_button、その要素はまだ存在せず、ハンドラーは接続されません。

2つのオプションがあります。

  1. scriptマークアップで使用する要素の下にタグを配置するだけですadd.js。例：

    <input type="button" id="add_button" value="Add">
<!-- ... -->
<script src="add.js"></script>

    次に、ブラウザを実行するadd.jsと、要素が存在します。scriptタグはボタンの直後にすることもできますが、 YUIの人たち</body>と同じように、通常はファイルの終わり（たとえば、終了タグの直前）をお勧めします。

  2. で別のreadyハンドラーを使用しadd.jsます（好きなだけ持つことができます）：

    // add.js gets its *own* ready handler
$(document).ready(function() {
    $('#add_button').click(function(event){
     alert('hello');
    });
});
于 2012-05-26T08:51:37.990 に答える
2

ハンドラーコード.readyもでラップしadd.jsます。そうすれば、実際にハンドラーを接続する前に、DOMの準備ができており、ボタンが存在していることを確認できます。

これが速記です.ready()

$(function() {
    $('#add_button').click(function(event){
       alert('hello');
    });
});
于 2012-05-26T08:52:40.033 に答える
1

常にdocument.readyを使用してイベントハンドラーをアタッチします。外部のjsファイルは、html、css、およびその他のインポートされたデータと同時に処理されます。

于 2012-05-26T08:54:32.150 に答える
1

index.js

function myClickEvent(event) {
 alert('hello');
}

add.js

$(document).ready(function() {
$('#add_button').click(function(e){
      myClickEvent(e);
    });
    });

なぜあなたのロジックは機能しませんか？ドキュメントが準備完了状態に達するとすぐに実行されるため、どこでも利用できないドキュメントの準備完了状態内に自己関数を作成しようとしています。

あなたはあなたが望むところならどこでもあなたが参照できるどこかにあなたの関数を定義させる必要があります！最善の方法は、常にそれらを一番上に宣言し、ドキュメント準備機能内でもどこでも利用することです。

$('#add_button').click([])また、一部のブラウザでは、何がロードされているか、何がロードされていないかを判断できないことがあるため、機能しない場合があります。それも「準備完了」の中に入れておけば、正しく理解できます。それは完璧に動作します！

于 2012-05-26T09:02:02.163 に答える