2

したがって、この2つのjQuery関数を.jsファイルに保存し、headタグの前に.jsファイルをロードします。

.jsファイルの内容：

$(document).ready(function(){

    $("#button1").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button2.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

    $("#button2").click(function(){
        $.ajax({
            type: 'GET',
            url: 'button1.php',
            success: 
                function(html){
                    $('#button_div').html(html)
                }
            ,
        });     
    });

});

だから体の後に私は持っています：

<div id="button_div"><input type="button" id="button1" value="Press"></div>

button1を押すと、button2.phpという名前のphpファイルにdivとbutton2コードがロードされますが、ここでは、button2を押すとbutton2クリック機能が実行されません。

なんで？

button2のjQueryコードをbutton2.phpファイル内に配置すると、要素は正常に機能します。しかし、私はそれを望んでいません。jQueryの行を.jsファイルにのみ保存し、</head>タグの前にのみ保存した​​い。要素の後にjQuery行を使用したくありません。

4

5 に答える 5

7

を呼び出すときはまだ存在しないので$("#button2").click()、#button2何も呼び出さないでください。クリックイベントを機能させるには、次のようにイベント委任を使用する（つまり、存在する要素にバインドする）必要があります。

$(document).on('click', '#button2', function () {

その後、#button2追加されるたびに、それをクリックすると、そのイベントコールバックがトリガーされます。

（document例として使用しますが、それに近い祖先を使用してみてください#button2）。

于 2013-01-31T23:46:01.883 に答える
3

セレクターは最初に呼び出したときに要素を返さないため、機能しません。$('#button2')は1回だけ呼び出され、DOMの変更を監視しません。

代わりに、イベント委任構文を使用してください。

$('#parent').on('click', '#button2', function() {
    ...
});

また、AJAXリクエストは少し単純化できます。

$("#button1").click(function() {
    $('#button_div').load('button2.php');
});
于 2013-01-31T23:44:56.317 に答える
0

私が想定しているbutton1.phpとbutton2.phpの両方のコンテンツを投稿できますか

button1.php =

<input type="button" id="button2" value="Press">

button2.php =

<input type="button" id="button1" value="Press">

？

于 2013-01-31T23:45:28.500 に答える
0

あなたの中にbutton1クリック機能：

$("#button1").click(function(){
    $.ajax({
        type: 'GET',
        url: 'button2.php',
        success: 
            function(html){
                $("#button_div").html(html) // You forgot pass the selector as a string
            }
        ,
    });     
});

これで問題が解決する場合があります。また、要素が作成される前にjQueryが呼び出されている場合（トップダウンであることを忘れないでください）、機能しません。

于 2013-01-31T23:45:43.397 に答える
0

#button2クリックハンドラーを作成したときにページに存在しないためです。委任されたイベントのサポートとともに使用on()して、探していることを実行する必要があります。 

$(document).on('click', '#button2', function() {
    $.ajax({
        type: 'GET',
        url: 'button1.php',
        success: 
            function(html){
                $('#button_div').html(html)
            }
    });     
});

理想的には、作成前にページに存在する要素を取得できます。この要素には、#button2では#button2なくイベントハンドラーをアタッチできますdocument。

于 2013-01-31T23:46:50.477 に答える