3

Ajax / Request を使用して要素を div コンテナーにロードしています。デフォルトでは、入力ボックスを非表示にしています。ユーザーがその div の編集アイコンをクリックすると、入力ボックスが表示されます。これが私のコードです：

HTML コード

    <div class='container'>
      <input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none;     height:20px;' />
    </div>

JS コード

 $(".container").click(function(){
      console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div.
 });

新しい要素をコンテナにロードする前のコンソール ログ出力。

   <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="hyther@zohocorp.com" title="press enter to save">

エレメントをコンテナーにロードした後のコンソール ログ出力。

<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="saravanan@zohocorp.com" title="press enter to save">

この要素から「スタイル」属性を削除して新しいスタイル要素を追加しようとしても、まだ機能しません。

4

4 に答える 4

11

まず、jQuery ドキュメントの FAQ セクションを読む必要があります: Why_do_my_events_stop_working_after_an_AJAX_request

on() を使用して、将来の要素のハンドラーを委任します

$(document).on('click', ".container", function(){
/* your code*/
})
于 2012-06-20T20:19:39.277 に答える
3

代わりにこれを試してください：

$(document).on('click','.container',function(){

http://api.jquery.com/on/

于 2012-06-20T20:18:23.697 に答える
1

代わりにこれを試してください：

$('.container').live('click', function(){
     /* Your Code Here */
});
于 2012-06-20T20:24:42.693 に答える
0

問題はclick()、ajax リクエストの後に境界が失われることです。JQuery関数を使用してこれを機能させることができますが、.live()この関数は現在非推奨であり、.on()またはを使用することをお勧めします.delegate()。個人的には、プラグインを使用し.on()て、むしろ使用するヘッドデッキがたくさんあります。livequery プラグインを使用すると、次のように簡単になります。.delegate()livequery

 $(function(){

    $('#elementId').livequery('click',function(){
       //do something on click
    }) 
 });

詳細については、 .livequery() .on() .delegate()を参照してください。

于 2012-06-20T20:24:01.227 に答える