jQueryのクリックイベントは1回だけトリガーする

Question

jQueryの新機能ですので、これは愚かな質問かもしれません。 私の問題は、 。私がしようとしているのは、ajaxを使った単純な複数ページのフォームです。最初のステップではうまくいきますが、2回目にajax-submitクラスのボタンをクリックすると動作しません。ここで

は、私はAJAXフォーム提出のために使用しているコードです：

$(document).ready(function() { 
$(".ajax-submit").click(function() { 
var form_data = $('#unlockForm').serialize(); 
     $('.ajaxgif').removeClass('hide'); 
$.ajax({ 
type: "POST", 
url: "formprocess.php", 
data: form_data, 
success: function(respuesta) { 
    $('.ajaxgif').hide(); 
    $('#process-container').html(respuesta); 
}, 
error: function() { 
    $('.ajaxgif').hide(); 
    alert("Error! Please try again"); 
} 
}); 
return false; 
    }); 
}); 

とフォームのコードボタンはAjaxが提出持っている両方の形態では、この

<form name="unlockForm" id="unlockForm" method="post"> 
     <input type="text" onFocus="if(this.value=='Introduce IMEI') this.value=''" value="Introduce IMEI" onBlur="if(this.value=='') this.value='Introduce IMEI';" name="imei" class="textbox part1" id="imei"> 
    <input type="button" class="ajax-submit inputbutton part1" value="Next" name="simple" id="next-imei"> 
    </form> 

のような単純なもの私はチェックしたが、間違いはありませんでした。私はなぜ送信ボタンを使わないのか聞いてみましたが、試してみましたが、送信イベントを正しく管理する方法がわからず、ページを再充電していました。

Answer 1

clickイベントは新しい.ajax-submit要素に関連付けられていません。
これを行うには、onまたはdelegateのような委任イベントを使用する必要があります。

$("#process-container").on('click','.ajax-submit',function() { 
    var form_data = $('#unlockForm').serialize(); 
    $('.ajaxgif').show(); 
    // I think you didn't really meant: $('.ajaxgif').removeClass('hide'); 
    $.ajax({ 
     type: "POST", 
     url: "formprocess.php", 
     data: form_data, 
     success: function(respuesta) { 
      $('.ajaxgif').hide(); 
      $('#process-container').html(respuesta); 
     }, 
     error: function() { 
      $('.ajaxgif').hide(); 
      alert("Error! Please try again"); 
     } 
    }); 
    return false; 
}); 

デリゲートイベント関数の表：

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

on有用docs：セレクタを省略またはNULLである場合

、イベントハンドラは、直接又はdirectly- と呼ばれバウンド。ハンドラは、 要素で直接発生するか、子孫（内部）要素から発生するバブルであろうと、選択した要素でイベント が発生するたびに呼び出されます。

セレクタが用意されている場合、イベントハンドラは が委任されています。イベントが直接バインドされた要素の に発生したときにはハンドラは呼び出されませんが、 がセレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。 jQueryは、イベントターゲットからイベントターゲット までのイベントを、ハンドラがアタッチされている要素（すなわち、最も内側の要素の の最も内側）に吹き込み、セレクタに一致する パスに沿った任意の要素のハンドラを実行します。

イベントハンドラは、現在選択されている要素にのみバインドされています。コードが.on（）を呼び出すときに、ページに が存在していなければなりません。 要素が存在し、選択できるようにするには、ページ上の HTMLマークアップ内にある要素のドキュメント対応ハンドラ内でイベント バインディングを実行します。新しいHTMLがページに挿入されている場合、 は、新しいHTMLが になった後で要素を選択し、イベントハンドラをアタッチします。または、委任されたイベントを使用して、次のようにイベント ハンドラを添付します。

委任イベントには、後でドキュメントに追加される 子孫エレメントのイベントを処理できるという利点があります。 委任イベントハンドラがアタッチされているときに存在することが保証されている要素を選択すると、委任されたイベントを に頻繁にアタッチして削除する必要がなくなります。この 要素は、 ハンドラがドキュメント内のすべてのバブリングイベントを監視したい場合は、 モデルビューコントローラの設計、またはドキュメントのビューのコンテナ要素です。文書要素の は、他のHTMLをロードする前に文書の先頭にありますので、文書を準備するのを待つことなく、 を待たずにそこにイベントを添付することは安全です。