2

以前に同様の質問をしましたどうすれば jquery attach behavior to an element after insert it を行うことができますが、まだ答えが見つかりません。物事を明確にするために、別の例で新しい質問をしています。

これが機能しない私のコードです。

$(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 を介して送信し、更新されたフォームに置き換えることができます。しかし、新しい送信ボタンをクリックしても何も起こりません。

4

5 に答える 5

1

ボビンスに追加するには、イベント委譲live技術を使用してイベントを「添付」します。これは、すべてのイベントが最終的に DOM ( ) の最上位の親に伝達されることに基づいて機能するため、ドキュメントにイベント ハンドラーを 1 つだけアタッチし、イベントの元のターゲットに基づいてさまざまなイベント ハンドラーを実行するとします。window.document

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

于 2009-11-24T00:44:51.160 に答える
0 
$('form.edit_color').live("submit",
function( event ){
event.preventDefault();
}
);

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

乾杯、 http：//hiteshjoshi.com

于 2011-05-29T02:22:13.783 に答える
0

livequeryは送信イベントを処理すると思っていましたが、それでも問題が発生したときは、live（）も処理することにしました。

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

ファイアバグの送信ボタンを調べていたときに、フォームの子として表示されていないことに気付きました。そのため、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;}）;

<div class="color_form">
<% form_for color, :url => admin_color_path(color) do |f| -%>
 <div style="background: #<%= color.value %>"></div>
  <div><%= f.text_field :title %></div>
   <div><input type="text" size="30" name="color[value]" class="colorpickerfield" value="<%= color.value %>" /></div>
    <div style="text-align:left">
     <% Color.types.each do |type, name| %>
      <div>
       <%= color_types_checkbox(color, type) %>
       <%= name %>
      </div> 
     <% end %>
    </div>
   <div>
  <%= f.submit "Update", :class => 'submit' %>
 </div>
<% end %>
</div>
于 2009-11-24T02:35:29.017 に答える
0 
$('form').live('submit', function(e) {
    alert(e.type);
    e.preventDefault();
});

$('form :submit').live('click', function(e) {
    $(this.form).submit();
    e.preventDefault();
});
于 2010-10-05T10:58:32.753 に答える
0

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

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

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

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

于 2009-11-24T00:34:57.130 に答える