web-dev-qa-db-ja.com

jQueryクリック機能は、ajax呼び出しの後に機能しませんか？

ここで、jQueryクリック関数は正常に機能します。

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

$('.deletelanguage').click(function(){
    alert("success");
});

しかし、<a>をajaxで設定すると、$('.deletelanguage').clickは機能しません。

例えば

function CreateRow(jdata) { 
    $('#LangTable').append('<a class="deletelanguage">delete</a>');
}

$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

現在、最後の<a>の$('.deletelanguage').clickは機能していません。

jsfiddleの例： http://jsfiddle.net/suhailvs/wjqjq/

注：ここではCSSが正常に機能します。

これらの新しく追加された<a>をjQueryクリックで動作させたいと思います。

htmlajaxjquerydom
68
suhailvs

問題は、.clickが既にページにある要素に対してのみ機能することです。将来の要素を配線する場合は、onのようなものを使用する必要があります

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});
169
TGH

$('.deletelanguage').click()を使用してイベントハンドラーを登録すると、コードが実行されたときにdomに存在する要素のみにハンドラーが追加されます

ここで委任ベースのイベントハンドラを使用する必要があります

$(document).on('click', '.deletelanguage', function(){
    alert("success");
});
71
Arun P Johny
$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

または

$('body').on('click','.deletelanguage',function(){
    alert("success");
});
19
coolguy

クラスは動的に追加されるため、 event delegation を使用して次のようなイベントハンドラーを登録する必要があります。

$('#LangTable').on('click', '.deletelanguage', function(event) {
    event.preventDefault();
    alert("success");
});

これにより、イベントが#LangTable要素内のアンカーに添付されるため、document要素ツリー全体をチェックする必要がなくなり、効率が向上します。

FIDDLE DEMO

6
palaѕн

ここにFIDDLE

あなたと同じコードですが、動的に作成された要素で動作します。

$(document).on('click', '.deletelanguage', function () {
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
2
Vond Ritz

クリックイベントは、イベントが定義されている時点では存在しません。ライブを使用するか、イベントを委任できます。

$('.deletelanguage').live('click',function(){
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
2
prospector

私に合ったシンプルなソリューションをテストしました！私のjavascriptはjs別ファイルにありました。私がやったのは、ajaxで読み込まれたhtmlに新しい要素のjavascriptを配置したことです。これは、javascriptの大きなファイルを持っている人向けです!!

1
pollux1er