3

この問題にどのようにアプローチすればよいかわかりません。

いくつかのデータ属性が追加された HTML で作成されたボタンがいくつかあります。これらのボタンにはroleBtn、jQueryroleBtnClicked関数を呼び出して HTML のデータ属性の変数を取得するというクラスがあります。

$(".roleBtn").click(roleBtnClicked);

function roleBtnClicked(event){
    reg.roleName  = $(this).html();           /* Get role name: Actor */
    reg.blueBtn   = $(this).data('blue');     /* Get blue-btn-1 */
    reg.the_Num   = $(this).data('num');      /* Get the number */
    reg.modal_ID  = $(this).data('modal');    /* Get modal-1 */

この情報を使用して、roleBtnをクリックするとモーダル ウィンドウが表示され、モーダル ウィンドウdoneButtonを閉じ、データ属性の変数を使用してその場で新しい HTML を生成します。この新しい HTML には、クラスが のボタンが含まれますblueBtn。

私の問題は、blueBtnその場で作成された青いボタンでクリック機能が機能しないことです。事前にクラスを持っている divblueBtnでは機能しますが、その場で作成された場合は機能しません。

これに対する回避策を知っていますか？それとも、単純なものが欠けていますか？

がクリックされた後、doneButtonその場で blueBtns を含む新しい HTML を作成する別の関数があります。

$('.selected_row .choices-col-left').append('<div class="blueBtn-holder" id="blueBtnHolder-'+theNum+'"><div class="blueBtn" id="'+blueBtn+'" row="'+rowName+'" modal="'+modal_ID+'" num="'+theNum+'">'+roleName+'</div></div>');

動作しない私の青いボタンのクリック機能

$(".blueBtn").click(blueBtnClicked);

function blueBtnClicked(event){
    alert("Where are you blueBtn on the fly?");
    console.log("Where are you blueBtn on the fly?");
};
4

2 に答える 2

7

これを試してください:- .on()を使用して動的に作成された要素のイベント委任が必要です

$(".selected_row").on('click', '.blueBtn', blueBtnClicked);

function blueBtnClicked(event){
    alert("Where are you blueBtn on the fly?");
    console.log("Where are you blueBtn on the fly?");
};

デモ

クリックイベントをバインドするだけでは、既存のDOM要素にのみバインドされるため、イベントを親要素にバインドすると、後でそのコンテナーと同じセレクターで追加する要素には、委任によってイベントが利用可能になります.

Jquery ドキュメントから

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

于 2013-05-03T15:22:28.533 に答える
4

これは、新しく作成されたアイテムのイベント ハンドラーを再割り当てする必要があるためです。

より良いアプローチは.on、コンテナ オブジェクトで使用し、クリックに応答する必要がある子オブジェクトを指定することです。

$(".container").on('click', '.blueBtn', blueBtnClicked);

このように、その場でオブジェクトを広告しても、反応します。多くのイベント ハンドラーではなく 1 つのイベント ハンドラーを作成するだけなので、これは実際にははるかに効率的な処理方法です。これは、実際にはイベント委任と呼ばれます。

を行う$(selector).clickと、一致するすべての要素を見つけてselector、特定の「クリック ハンドラー」をそれらに割り当てるように jQuery に指示していることに注意してください。これは、新しいオブジェクトを作成するときに再び発生することはありません。これは、将来のすべてのオブジェクトを同様に処理するように jQuery に指示していないためです (jQuery は、新しいボタンの追加を認識せず、それにハンドラーを割り当てません)。

于 2013-05-03T15:24:14.050 に答える