2

DOM にまだロードされていない要素に作用するクリック イベントを作成するにはどうすればよいですか?

シナリオ:

  • native-btn は、ドキュメントの準備ができたときに読み込まれる div です。
  • ajax-loaded-element は、ajax フォームが一連のクライアント側イベントを実行した後に表示される div です。

私のイベントは次のとおりです。

$(".native-btn").click(function() {
    $(".ajax-loaded-element").fadeOut();        
});

.ajax-loaded 要素が応答しないようです。.live() は非推奨であり、.on() イベントは新しく挿入された要素と直接対話する場合にのみ適用され、二次的なアクションによって要素に作用することはありません。私が見逃している .on() の別の使用法はありますか?

ありがとう！

アップデート

にアクセスするために .on() イベントを使用しています。ajax-loaded-element div. ただし、.hide() や .css() などの基本的なイベントには応答しますが、最終的に必要な .trigger() には応答しません。

$(document).on("click", ".native-btn", function() { 
    $('.ajax-loaded-element').trigger('click'); 
    $('.ajax-loaded-element').css("background-color","red"); 
});

背景が赤に変わりますが、トリガーは発火しません。CMS によってロードされている .ajax-loaded-element のデフォルト機能は、ajax フォームのページを進めることを付け加えておきます。デフォルト機能の前後にカスタムアニメーションを追加したいので、リモートでトリガーしようとしています。

全体のスクープ

ページ上のブロックとして表示される Drupal で複数ページの Web フォームを使用しています。私はそれに ajax クライアント側機能を割り当てたので、必要に応じてフォームを進めるために "PREV" および "NEXT" div を動的に挿入します。

UX の観点から、フォーム全体をフェードアウトさせ、フォームを次のページに進め、次にフォームをフェードインさせたいと考えています。ユーザーがフォームにあることを認識できないような瞬く間に変更するのではありません。高度。Webフォーム機能にアクセスできないので、jQueryとトリガーでやろうとしています。基本的なマークアップは次のとおりです。

<div id='webform'>
    ...form code...
    <div class='ajax-loaded-next'>Next</div>
    <div class='ajax-loaded-prev'>Prev</div>
</div>

<div class='native-btn-next'>NEXT</div>
<div class='native-btn-prev'>PREV</div>

$(document).on("click", ".native-btn-next", function() { 
    $('#webform').fadeOut(); 
    $('#webform .ajax-loaded-next').trigger('click'); 
    $('#webform').fadeIn(); 
});

$(document).on("click", ".native-btn-prev", function() { 
    $('#webform').fadeOut(); 
    $('#webform .ajax-loaded-prev').trigger('click'); 
    $('#webform').fadeIn(); 
});

次のようになります: (ajax NEXT/PREV は白、ネイティブの NEXT/PREV は黒)

スクリーンショット

ご覧のとおり、それは魅力のように機能する [次へ] ボタンだけで始まります。ウェブフォームがフェードアウトし、ajax-loaded-next トリガーがクリックされ、ページが進み、ウェブフォームがフェードインします。

しかし、02 ページには ajax-loaded-prev ボタンが表示されます。

スクリーンショット

フォームがロードされたとき、これは明らかに DOM にありませんでした。私の native-btn-prev は Web フォームをフェード インおよびフェード アウトしますが、クリックをトリガーしません。

それが理にかなっていることを願っています...

4

4 に答える 4

3 
$(document).on('click', '.native-btn', function() {
    $(".ajax-loaded-element").fadeOut();        
});

これは動的に挿入された要素のイベント ハンドラーであり、ドキュメントを最も近い非動的な親に置き換える必要があります。

実際には存在しないものをフェードアウトできないことに注意してください。

于 2013-04-27T18:43:13.283 に答える
0 
$(document).on('click', '.native-btn', function() {
  $('.ajax-loaded-element').fadeOut();      
});
于 2013-04-27T18:43:14.617 に答える
0

マークアップにclass を持つ空の dom 要素を含めることができるajax-loaded-elementため、ページの読み込み時に存在します。ajax リクエストが成功すると、その div が設定されます。クリック イベントは既にバインドされているため、クリックするとfadeOut()期待どおりに発生します。

于 2013-04-27T18:43:34.740 に答える
0

はい、メソッド http://api.jquery.com/on/で使用します

$("body").on( "click", ".native-btn", function() {
    $(".ajax-loaded-element").fadeOut();        
});

また

$(".native-btn").on( "click", function() {
        $(".ajax-loaded-element").fadeOut();        
});
于 2013-04-27T18:44:07.837 に答える