JQueryの動的タグはどのように再利用できますか？

私はサイトに画像を追加する機能を使用しています。これらは、.html（）を使用してDIVに入ります。これを実行すると、ホバーに影響を与えるために同じ画像が必要になりますが、マウスを置くと何も起こりません。 .html（）関数で使用しているのと同じコードを入力すると、同じクラスなどがホバーになります。JQueryの動的タグはどのように再利用できますか？

多くの試みの後、私はこのサンプルに私の問題を絞りました。問題は、コンテナDIVが.html（）...によって追加されたコードをどのように公開するのか、私のホバー機能は動的に追加されたタグを見つけることができないということです。

<html> 
<head> 
<title>Problems</title> 
<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
<p id="TXToldone">This line was already here</p> 
<div id="DIVnewone"></div> 
<script> 

function createnewone(){ 
    $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>"; 
    $("#DIVnewone").html($txthtml); 
}; 
$(document).ready(function() { 
    createnewone(); 
}); 
$("*").on("click", function(){ 
    alert($(this).attr("id")); 
}); 

</script> 
</body> 
</html>

注：

は、ここに私のサンプルコードです - これが私の本当の問題の単なる生の一例です。これは私が実際に達成しようとしているのではないは実際のものを解決する;
- 実際のコードからのものである...文書の後にある。準備完了画像を再帰的に追加してください各DIV ...
- 3番目の関数はちょうどあなたの人が私の問題を見ることができます...それはあなたがクリックした要素のIDで警告を表示する必要がありますが第1段落の場合は...）ただし、をクリックすると、その段落のIDは表示されませんが、コンテナーDIVのIDはと表示されます。
- （はい、それはまた、文書まで、他の親のための警告を与えるちょっと、それは単なる例です）
- 私は手動で同じDIVに段落を追加する場合は、「静的」段落ショーIDをクリックするとそのIDが表示されますが、「動的」のIDはまだに表示されます。

お願いします。
私のポイントが明確になるよう

EDIT（また、私はそれがすべての写真を「見る」ことができるように、私のコードの下に滞在するスクリプトが必要）：私はそうDIVにコンテンツを追加する方法が必要です他の関数は新しいコードを参照します。

サンプルコードが意図したとおりに動作するように、この行をどのように置き換えますか？

$("#DIVnewone").html($txthtml);

出典

2012-02-17 Ado Peder

主なポイントは、イベント（ 'on（）'）を添付すると、その要素はまだDOMにありません。イベントはそれに付随しないでしょう。追加された要素にイベントを再度アタッチするか、イベント委譲（ 'delegate'または' 'on（）']を使用する必要があります（http://api.jquery.com/on/#direct-and-delegated-イベント）を新しいjQueryで、または 'live'を非推奨としています）。 – kapa

新しい要素をhtml（）で設定するのではなく、divに追加しようとしましたが、.html（）も同様に動作するはずです。

function createnewone(){ 
    $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>"; 
    $("#DIVnewone").append($txthtml); 
};

その後、あなたはあなたがセレクタ（「#TXTnewone」）の上にマウスを持っている場合、それは何をする必要があるかを行うための関数（1.7以降）上で以下を使用することができます。以下のコードは、 "$(document).ready(function() { ...here... }"関数に入る必要があることに注意してください。これはonイベントを割り当てる際にbodyタグがロードされていることを確認するためです。

$(document).ready(function() { 
    createnewone(); 
    $("body").on(
     { 
       mouseenter: function() { $(this).css("color","red"); } 
      , mouseleave: function() { $(this).css("color","black"); } 
     } 
     , "#TXTnewone" 
    ); 
});

ここに上記の作業のjsFiddleがあります。

出典

2012-02-17 10:21:52 harag

ええと...あなたは本当に正しいようです。あなたのフィドルで遊んで、私は必要なものに近づいています。はい、html（）もあなたの例ではうまくいきます...あなたの投稿の鍵は動的にCSSを変更しているようです。私はそれがどのように進むのか教えてくれます。 –

あなたはおそらくlive()機能を探しています。 jQueryのバージョン1.7

説明
後

またはon()は、現在および将来の電流セレクタ、と一致するすべての要素のイベントハンドラを接続します。

出典

2012-02-17 02:29:01

おそらく私のせいで、私はそれを見ることができません。私が正しく読んでいる場合、LIVE/ONはイベントに要素をサブスクライブしますが、HTML（）を使用して追加するテキストには適用されません... もっと説明してください。 –

新しく追加されたテキストは、新しく追加された要素の一部ではありませんか？その要素をライブ関数で使用するセレクタの一部にするだけです。 –

コンテナDIVはすでにそこにあります（例のように）、私はHTML（）を新しい文字列に設定します...中心の画像をアンカーで...そして私のホバー関数はすべてのアンカーを探します特定のCLASSまたはID ...しかし、新しい行はありませんa）他人の名前空間を共有しないb）他の人と共有しないCLASSの名前元の質問を編集したので、私が探しているものを参照してください：html（）はテキストを追加しますが、新しいテキストは通常のテキストのように動作しません。 –

動的コンテンツを追加するイベントコール内にホバー機能を配置します。あなたのホバー機能は、コンテンツが追加される前に評価されており、後で再評価されず、undefinedになります。

EDIT
ロバート・ハーヴェイの答えはこれよりもはるかに良いですが、考え方は同じです。

出典

2012-02-17 02:29:42

JQueryの動的タグはどのように再利用できますか？

答えて

関連する問題