1

HTML要素を生成しているPHPファイルがあり、ページの読み込み時にAJAXから呼び出されています。私が探しているのは、動的に生成された要素にJQueryを適用することです。そのため、PHPファイルから生成されたラベルがクリックされるたびに、何かが発生します。JQueryコードをPHPファイルに配置してエコーアウトしようとしましたが、それは機能しませんでした。また、AJAXが呼び出されているHTMLページにもコードを配置しましたが、どちらも機能しませんでした。

私のHTMLには次のものがあります。

<body onLoad="javascript:getLabels();">,

これは、AJAXを介してphpファイルを呼び出します。

function getComments() { 
    var thePage ='loadLabels.php'; 
    ...

次の行としてのPHPファイル：

echo '<label id="labellink" class="ldClass">Label </label>';

これは、一度ロードされるとページ内に複数のラベルになる可能性がありますが、すべてが1つ<form>であるため、JQueryを使用する必要があるため、ラベルがロードされてクリックすると、何かが発生します。

4

6 に答える 6

2

あなたが望むのはjQueryの「ライブ」http://api.jquery.com/live/です

編集: .live() が減価償却されているため、jQuery の新しいバージョンで .on() が必要です: http://api.jquery.com/on/

詳細については、以下のコメントを参照してください。

于 2012-05-10T19:30:30.403 に答える
2

あなたが望むものを達成するための2つの方法があります。

1: AJAX 呼び出しの onSuccess 内のリンクにイベントを添付して、コンテンツを取得します。そうすれば、新しいコンテンツが DOM に追加されたときに、必要なイベントをそれらの特定の要素にアタッチできます。

2: 推奨される解決策は、イベント委任を使用することです。基本的に、イベントを特定の要素にアタッチする代わりに、単一のイベントを親要素コンテナーにアタッチし、イベントがトリガーされると、クリックされたターゲットの条件付けに基づいて (それ自体が特定のクラスを持っている場合)、特定のことを実行します。行動。これは、イベントを特定の要素に再アタッチすることなく流動的/変更可能なコンテンツを処理するために使用される手法です。jQuery の .on() API メソッドは、そのようなソリューションをエレガントに提供します: http://api.jquery.com/on/

例えば：

$("#container").on("a.changeColor", "click", function() {
  $(this).toggleClass("newColor");
});

id="container" を使用してイベントを親要素にデリゲート/アタッチし、「changeColor」クラスを持つすべての子アンカー要素で「newColor」クラスを切り替えるように指示します。#container 要素の内部コンテンツを更新して変更した後でも、クラス「changeColor」を持つ新しい要素は、クリックされたときの動作を継承します。

于 2012-05-10T19:44:46.777 に答える
2

.on()(ドキュメント) は、ハンドラーの作成時に必ずしも存在しない可能性がある動的要素のハンドラーを作成する方法を提供します。

を使用する.on()には、ハンドラを DOM ツリーの上位にある非動的オブジェクトにアタッチする必要があります。クリックは子要素からツリーを伝播し、その時点で、添付されたハンドラー (デリゲート).on()は提供されたフィルターを使用して、クリックが正しいオブジェクト (動的オブジェクト) で発生したかどうかを確認します。

$('body').on('click', '.dynamic_element', function() {
   // Handler code
});

この場合、 を使用bodyしました。これは、消えずにハンドラーを使用するためです。.dynamic_elementハンドラは、静的要素である限り、の祖先である任意のオブジェクトにアタッチできます。一般的に近い方が良いですが、ページが非常に動的である場合はうまくいきますbody。

背後にある全体的な考え方.on()は、ハンドラーを既存の DOM 要素にアタッチする必要があるということです。オブジェクトがまだ存在しない場合、それにハンドラーをアタッチすることはできません。要素が削除されると、ハンドラーも削除されます。これが、すでに存在し$('.dynamic_element').click()ない限り機能しない理由です。.dynamic_elementしたがって、 では、存在する (そして消えない) ことがわかって.on()いるものにハンドラーをアタッチするだけです。このハンドラーは「デリゲート」と呼ばれます。子オブジェクトからのイベントを監視します。これは、DOM 要素の性質により、ツリーを上方向に伝播します。

于 2012-05-10T19:38:56.910 に答える
1

編集それについて私を修正していただきありがとうございます。値下げしたので、しばらく使っていません。

これは解決策というよりも「ハック」としてカウントされると確信しており、必要に応じて反対票を公然と歓迎しますが、AJAX 後の機能を成功関数内に配置することもできます。

また、古いバージョンの jQuery では.live()、要素が DOM 内にあるかどうかに関係なく要素を検索するという関数が使用されていました。jQuery の最新バージョンでは減価償却されていますが、その飛躍を望むなら、1.5 で機能したという事実を知っています。（私はのようなものについて話している$(a).live('click', function () { });）。

記録のために、私はこれを回答ではなくコメントとして投稿したいと思っていますが、まだ十分な信頼がありません.

于 2012-05-10T19:29:51.603 に答える
0

動的に作成された要素とonloadバウンドイベントのほんの一例

var a = $("<a>").attr('href','#')
                .attr('class','elem')
                .text('click me')
                .prependTo('body');
$(document).on("click", "a.elem", function(e){ 
    e.preventDefault();
    alert("Goodbye!"); 
});
于 2012-05-10T20:07:54.840 に答える
-1

.delegate() を使用することは、私が今まで使用した中で最良の方法です。

http://api.jquery.com/delegate/を参照

于 2012-05-10T19:35:25.517 に答える