3

.submit()多くの検索を行いましたが、jQueryがトリガーされない理由がわかりません。.click()送信ボタンも試してみました。

現在、div テンプレート (フォームを含む) を持っています。

<div class="reply-to-existing-message" style="display: none">
        <form class="reply-message-form">
            <textarea id="post-reply-message-textarea" name="PostReplyMessage[message]" rows="3" cols="40" style="resize: none"></textarea>
            <input class="reply-to-message-id" type="hidden" name="PostReplyMessage[id]" />
            <input class="post-reply-message-submit" type="submit" value="Reply"/>
        </form>
    </div>

返信ボタンがクリックされたときに、jQuery を使用してこれをメッセージに追加します (ユーザーがメッセージに返信できるように、ドロップダウンの返信フォームを生成します)。これは正常に機能します（firebugを使用して再確認しました）。

ただし、私の jQuery コードは、送信ボタンをクリックしてもアラートを生成しないため、トリガーすらされません。誰かがなぜこれが起こっているのか説明してもらえますか、ありがとう! jQuery コード:

$(document).ready(function() {
    $('.reply-message-form').submit(function() {
        alert('test');
        return false;
    }) ;
});
4

2 に答える 2

10

コンテンツを動的に追加する場合、その静的呼び出し.submit()は機能しません。これは、実行時にセレクターに一致した要素にのみイベント ハンドラーをバインドするため、その後に追加された要素にはイベント ハンドラーがバインドされません。

解決策は、次の関数を使用したevent delegationです。.on()

$(document).on('submit', '.reply-message-form', function(e) {
    alert('test');
    return false;
});

理想的には、 を使用するのではなく、documentすべての動的コンテンツを含む最も近い静的 (つまり、ページの読み込み時に存在する) 要素を選択します。

または、1.7 より前のバージョンの jQuery を使用していて関数にアクセスできない場合は、代わり.on()に関数を使用できます。.delegate()

$(document).delegate('.reply-message-form', 'submit', function(e) {
    alert('test');
    return false;
});
于 2012-08-16T12:22:56.920 に答える
3

動的に生成された要素の場合、イベントをデリゲートする必要があります。onメソッドを使用できます。次のことを試してください。

$(document).ready(function() {
    $(document).on('click', 'input[type=submit]', function() {
        alert('test');
        return false;
    });
});
于 2012-08-16T12:22:26.877 に答える