0

index.php というページがあるとします。このページには、「msg」というボタンと「show」という別のボタンを含む divContent という名前の 1 つの div 要素が含まれています。

index.php をロードすると、2 つのボタンが表示されます。私のページにjqueryを追加しました。「メッセージ」ボタンをクリックすると、「成功した」メッセージが表示されます

アラート(「成功」);

. 表示ボタン (divContent の外側) をクリックすると、別のページ コンテンツが ajax 技術によって divContent に読み込まれます。

$('#msg').click(function(e) {
    alert("successful");
}); 
} //Whilst editing formatting - extra closing brace

$('#show').click(function(e) {
    $.ajax({
        type: "GET",
        url: "test.php",
        success: function(msg){
            $('#divContent').html(msg);
        }
    });
    e.preventDefault();
});


test.php
--------
    <input type="button" id="msg" />

test.php には、index.php にある msg ボタンと同じボタンが含まれています。私の問題は、index.php をロードし、msg ボタンをクリックすると、成功したメッセージが表示されますが、表示ボタンをクリックすると、test.php の内容が divContent にロードされ、msg ボタンをクリックすると、「成功」メッセージが表示されません。何が問題ですか

4

2 に答える 2

0

これは、既存のすべての #msg 要素にクリックをバインドしているためです。バインド時に存在しない要素では機能しません。そのため、新しいコンテンツをロードするときに、クリックがバインドされていないため、再度バインドする必要があります。

success: function(msg){
   $('#divContent').html(msg);
   $('#msg').click( .... );
}

または、.on() メソッドを使用します。

両方の #msg ボタンの祖先である要素を見つけ、.on を使用してそれにイベントをバインドします

$('.parent').on('click', '#msg', function(){
   alert("whatever");
});

これにより、作成された時期に関係なく、.parent の子である #msg には必ずクリック イベントが発生します。

ソース: http://api.jquery.com/on/

于 2012-07-18T10:19:13.300 に答える
0

最初のクリック関数には、追加の右中括弧があります。

$('#msg').click(function(e) {
    alert("successful");
}); 
} //<<Here
于 2012-07-18T10:19:18.890 に答える