2


0

フォームがajaxを介してロードされると、jQueryのliveおよびlivequeryが機能しない

以前に同様の質問をしましたhttps://stackoverflow.com/questions/1610752/how-can-i-have-jquery-attach-behavior-to-an-element-after-inserting-it[jquery attach挿入後の要素への振る舞い]]、まだ答えが見つかりません。 物事を明確にするために、別の例を使用して新しい質問をしています。

動作しない私のコードは次のとおりです。

$(document).ready(function() {
 $('form.edit_color').live('submit',  function(){
    var form = $(this).closest('form');
    var colorRow = $(this).closest('tr');
    var action = $(form).attr('action');
    var formData = $(form).serialize();
    $(colorRow).fadeOut();
   $.post(action, formData,
    function(data) {
        $(form).replaceWith(data);
        $(colorRow).fadeIn();
    });
    return false;
  });
});

これは、フォームごとにajaxを介して送信し、更新されたフォームに置き換えることができることです。 しかし、新しい送信ボタンをクリックしても何も起こりません。

5 Answer


1


bobinceに追加するには、「live」はhttp://www.google.com/search?q=javascript+event+delegation[event delegation]テクニックを使用してイベントを「添付」します。 すべてのイベントが最終的にDOMの最上位の親( window.document)に伝播することに基づいて動作するため、単一のイベントハンドラーのみをドキュメントにアタッチし、イベントの元のターゲットに基づいて異なるイベントハンドラーを実行します。

ただし、一部のイベントは伝播しません。 「submit」もその1つです。 したがって、そこでイベントの委任を使用することはできません。


0


元の質問で回答したように、「live」は単に「submit」イベントでは機能しません。

また、コールバック関数の $(colorRow).fadeIn();`は、 `submit`が発生した時点でフォームに存在していたcolorRowを参照しているため、おそらく機能しないことに注意してください。 しかし、前の `replaceWith`呼び出しでそのcolorRowを完全に削除して新しいものに置き換えました。 置換後、 `form`変数と colorRow`変数は有用なものを指し示しません。

「ライブ」は、イベントが実際にHTMLでどのように機能するかと完全には一致しない、ちょっとしたハックです。 それを使用する必要がないようにしてください。 多くの場合、ページの大部分を新しいマークアップに置き換えることは悪い動きです。 HTMLのカタマリを返すのではなく、JSON戻り値からフォーム内の既存の要素のコンテンツを更新できる場合、イベントを再バインドしたり、現在デッドとなっているDOMオブジェクトへの参照を保持したりする必要はありません。

(HTMLを返す必要がある場合は、少なくともフォームのコンテンツのみを返し、フォームタグ自体は返しません。 次に、 `html()`を使用してフォームのコンテンツを設定できます。 formタグ自体を置き換えないことで、その上で「submit」イベントを再バインドすることを心配する必要はありません。)


0


livequeryは送信イベントを処理すると考えていましたが、それでも問題が発生していたときは、live()も同様に考えました。

また、送信ボタンのクリックイベントにバインドしようとしたときに、フォームを見つけるのに問題がありました。

firebugで送信ボタンを調べていると、フォームの子として表示されていないことに気付きました。 そのため、送信ボタンがフォームの子要素であるとfirebugが判断できない場合、jQueryがどのような問題を抱えているのか(そして、W3Cバリデーターが何らかの理由で不満を言っていた)と考えました。

そこで、代わりにdivタグ内にある別のフォームで上記と同じコードを試してみましたが、うまくいきました。そのため、この質問のフォームからテーブルタグをすばやく削除し、驚くほどうまくいきました。

私の解決策は、htmlを有効にするために余分な時間をかけ、jQuery 1.3.3、http://docs.jquery.com/Release:jQuery_1.3.2まで動作しないと思われるものを使用することです。

以下は現在のコードです。フォームを適切にマークアップするために把握する必要があります。

$( 'form.edit_color')。live( 'submit'、function()\ {var form = $(this); var colorRow = $(this).closest( 'div.color_form'); var action = $( form).attr( 'action'); var formData = $(form).serialize(); $(colorRow).fadeOut(); $ .post(action、formData、function(data)\ {$(form)。 replaceWith(data); $(colorRow).fadeIn(); +}); return false;});

<% form_for color, :url => admin_color_path(color) do |f| -%>

  <%= f.text_field :title %>


     <% Color.types.each do |type, name| %>

       <%= color_types_checkbox(color, type) %>
       <%= name %>

     <% end %>


  <%= f.submit "Update", :class => 'submit' %>

<% end %>


0


$('form').live('submit', function(e) {
    alert(e.type);
    e.preventDefault();
});

$('form :submit').live('click', function(e) {
    $(this.form).submit();
    e.preventDefault();
});


0


$('form.edit_color').live("submit",
function( event ){
event.preventDefault();
}
);

これを試して。 詳細:http://api.jquery.com/event.preventDefault/

乾杯、http://hiteshjoshi.com