7

ボタンのあるページがあります。ユーザーがボタンをクリックすると、フォームが動的にレンダリングされます(つまり、非表示のフォームが表示されるだけでなく、jQueryを使用して完全に作成されます)。

私の問題は、新しく作成されたフォームがjQueryコマンドに応答しないことです。これは、現時点でレンダリングされたフォーム用に持っているコードです。

$("#savenewlang").click(function(e) {
    console.log("savenewlang has been clicked");
});

したがって、送信ボタンをクリックしたときにconsole.logである必要がありますが、実行されていません。

DOMをリロードする方法、または正しく発生する実際のイベントを割り当てる方法はありますか?

4

4 に答える 4

17
$("#container").on('click', '#savenewlang', function(e) {
    console.log("savenewlang has been clicked");
});

ここでは、ページの読み込み時にDOMに属する#container親要素を指します。#savenewlang


このイベントを指定するには、 3つの引数.on()が必要です

.on(eventName, target, callback);

ただし、通常のバインディングの場合、必要な引数は2つだけです。

.on(eventName, callback);

についてもっと読む.on()


残り

すべてのコードを

$(document).ready(function() {

});

要するに

$(function() {

});
于 2012-06-04T17:01:21.993 に答える
6

基本的に何が起こっているのかというと、コンテンツをdomに動的に追加する場合、追加されたdom要素にハンドラーを手動でアタッチする必要があります。ただし、jquery on()関数を使用すると、永続的なイベントハンドラーを作成できます。イベントがdomでバブルアップするという事実を使用して、クリック用のイベントハンドラーがない動的dom要素をクリックすると、イベントはbody要素にバブルアップし、on()関数が実際のアイテムを判別します。クリックしたのは#savenewlangで、定義した関数(e){}を呼び出します。

$("body").on('click', '#savenewlang', function(e) {
    console.log("savenewlang has been clicked");
});

構文は次のようになります。

$('#selector_or_id_of_static_element').on('event_type','#selector_for dynamic_content', function(e){ //callback});
于 2012-06-04T16:59:42.807 に答える
0

要素は動的にレンダリングされるため、次のように.delegate()メソッドを使用して関数を割り当てます。

$("body").delegate("#savenewlang", "click", function(e) {
    console.log("savenewlang has been clicked");
});

詳細については、リファレンスを参照してください: http: //api.jquery.com/delegate/

于 2012-06-04T17:01:40.810 に答える
0

DOM要素がまだ存在しない場合、イベントハンドラーが追加されます。あなたはそれを関数に入れてみることができます:

function addEvent() {
    $("#savenewlang").click(function(e) {
        console.log("savenewlang has been clicked");
    });
}

フォームを動的に追加した後、この関数を呼び出します。

于 2012-06-04T17:00:27.673 に答える