jqueryの新しい要素のイベントバインディングの問題 solution

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryの新しい要素のイベントバインディングの問題 solution_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:44 PM

イベントバインディング

jsのイベント監視はcssのイベント監視とは異なりますが、cssのスタイルさえ設定していれば、既存のものでも新規に追加したものでも同じパフォーマンスになります。ただし、イベントリスニングの場合はそうではありません。イベントを各要素に個別にバインドする必要があります。

一般的な例は、テーブルを処理する場合です。各行の末尾に削除ボタンがあります。これをクリックすると、この行が削除されます。

コードをコピーコードは次のとおりです。

tbody>

;/button>

通常、次のようにバインドします

コードをコピー

コードは次のとおりです。 jQuery( function($){ //削除イベントをバインドするために初期化された削除ボタンがすでにあります $(".del").click(function() { $(this).parents(" tr").remove();

});

}); 

domready より前に存在した削除ボタンではすべてが完璧に機能します。ただし、js を使用して domready の後に数行を動的に追加すると、新しく追加された行のボタンは効果を失います。 

この問題を解決するにはどうすればよいですか?以下に 4 つの解決策を示します。

解決策 0 - onclick メソッド

構造と動作の分離の原則を無視する場合、通常はこれを実行します。
このときのdeltr関数はグローバル関数にする必要があり、jQuery(function($) {})の外に置くとローカル関数になってしまい、htmlのonclickが呼び出せなくなるので注意してください。

コードをコピー

コードは次のとおりです:

jQuery(function($){ //行を追加$("#add2").click( function( ){

$("#table2>tbody").append('

')
});
});
//行を削除する関数は domready 関数の外側に配置する必要があります
function deltr(delbtn){
$(delbtn).parents("tr").remove();

解決策 1 - バインディングを繰り返す式

は、domready が配置されているときにイベントハンドラーを既存の要素にバインドし、
し、新しく追加された要素が追加されたときに再度バインドします。

コードをコピー

コードは次のとおりです:

jQuery(function($){ //削除ボタンイベントバインディングを定義します//コンタミネーションを防ぐために内部に記述しますグローバル名前空間function deltr(){

$(this).parents("tr").remove(); 
}; // をバインドするために初期化された削除ボタンがすでにあります。 delete イベント
$( "#table3 .del").click(deltr); 
//行を追加
$("#add3").click(function(){ 
$(' 

')
//ここを削除します。
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody")); >});
});

解決策 2 - イベントバブリング法

このボタンの要素イベントハンドラー関数をバインドします。
次に、event.target オブジェクトを使用して、このイベントが探しているオブジェクトによってトリガーされたかどうかを判断します。
通常、event.target.className、event.target.tagName などのいくつかの DOM 属性を使用して判断できます。

コードをコピー

コードは次のとおりです:

jQuery(function($){
//4 番目の削除テーブルのボタンイベントバインディング
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e. target) .parents("tr").remove();
}
});
// 4 番目のテーブルのボタンイベントバインディングを追加します
$("#add4") .click(function) (){
$("#table4>tbody").append('

;

この行には元々

;td class="content">この行には元々

>

この行には元々
削除
新しい行


削除
新しい行を追加		これがテンプレートです
この行には元々

テンプレートは次のとおりです		< tr>
この行には元々

jQuery(function($){
//6 番目のテーブルのボタンイベントバインディングを削除
$("#tbody6 .del" ).click(function() {
$(this).parents(".repeat").remove();
});
// 6 番目のテーブルのボタンイベントバインディングを追加します
$("#add6") .click(function(){
$("#tbody6>.template")
//イベント
.clone(true)
/ / テンプレートタグを削除します
。 RemoveClass("template")
//内部要素を変更します
.find(".content")
.text("New line")
.end ()
//テーブルを挿入
.appendTo($("#tbody6"))
})
});

同様に、この js は次の HTML 構造にも適用されます

コードをコピーします

コードは次のとおりです:

テンプレートは次のとおりです

>この行には元々

< ;/li>

この行には元々

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7330

Java チュートリアル

1627

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

jqueryでイベントをバインドする方法は何通りありますか? Nov 09, 2020 pm 03:30 PM

jquery でイベントをバインドするには、bind()、live()、delegate()、および on() メソッドの 4 つの方法があります。bind() メソッドはイベントを既存の要素にのみバインドできますが、 live() )、on () および delegate() はすべて、今後新しく追加される要素のイベントバインディングをサポートします。

UniApp エラーの問題を解決します:「xxx」イベントがバインドされていません Nov 25, 2023 am 10:56 AM

UniApp を使用してアプリケーションを開発するときに、次のエラーメッセージが表示される場合があります。「xxx」イベントがバインドされていません。これは UniApp のイベントバインディングメカニズムが原因で発生するため、この問題を解決するにはこのメカニズムを正しく設定する必要があります。 1. 問題の原因 UniApp では、ページコンポーネントのイベントバインディングは v-on 命令によって完了します。たとえば、テンプレートにボタンコンポーネントを追加します: <button@click="onClick">Click Me</butto

Vue アプリケーションで「クリック」イベントバインディングが無効な場合はどうすればよいですか? Jun 24, 2023 pm 03:51 PM

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue では通常、ディレクティブを使用して DOM 要素を操作します。その中でも「クリック」イベントはよく使われる命令の一つですが、Vue アプリケーションでは「クリック」イベントのバインディングが無効になる状況によく遭遇します。この記事では、この問題を解決する方法について説明します。要素が存在するかどうかを確認する最初のステップは、「クリック」イベントをバインドする要素が存在するかどうかを確認することです。要素が存在しない場合は、

jQuery イベントバインディングテクノロジの詳細な説明 Feb 26, 2024 pm 07:36 PM

jQuery は、Web ページでの対話性を処理するために広く使用されている人気のある JavaScript ライブラリです。中でもイベントバインディングは jQuery の重要な機能の 1 つであり、イベントバインディングを通じてユーザーインタラクションへの応答を実現します。この記事では、jQuery イベントバインディングテクノロジについて説明し、具体的なコード例を示します。 1. イベントバインディングの基本概念イベントバインディングとは、特定のイベントが発生したときに指定された操作を実行するために、DOM 要素にイベントリスナーを追加することを指します。 jQuery で、目的の

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法 Aug 04, 2022 pm 07:27 PM

JavaScript はスクリプト言語として、ページ上の要素にイベントをバインドできるため、指定されたイベントが発生すると、対応するイベントハンドラーを自動的に呼び出してイベントを処理できます。では、要素にイベントを追加するにはどうすればよいでしょうか?次の記事では、JS でイベントをバインドする 3 つの方法を紹介します。

jqueryバインディングイベントの機能は何ですか Mar 20, 2023 am 10:52 AM

jqueryバインディングイベントの機能: 通常のイベントをDOMノードにバインドする DOMノードが選択されている場合、イベントをそれにバインドして、ユーザーが対応する操作を提供しやすくします。 jQuery には、bind、live、delegate、on という 4 つのイベントバインディングメソッドが用意されており、対応するアンリスニング関数は unbind、die、undelegate、off です。

jQueryイベントバインディング技術の詳細な分析 Feb 26, 2024 pm 06:33 PM

jQuery は、要素の選択、DOM 操作、イベント処理など、Web 開発における多くの一般的なタスクを簡素化する人気の JavaScript ライブラリです。 jQuery では、イベントバインディングは非常に一般的で重要な操作の 1 つです。この記事では、jQuery のイベントバインディングメソッドについて詳しく説明し、読者がこれらのメソッドをよりよく理解して適用できるように、特定のコード例を使用します。 1.bind() メソッド binding() メソッドは、最も伝統的で一般的に使用されるイベントバインディングメソッドの 1 つです。できる

Vue ドキュメントでのイベントバインディング関数パラメーターの使用方法 Jun 20, 2023 pm 02:06 PM

Vue は、データ駆動型のアイデアを使用して開発プロセスを簡素化する人気のある JavaScript フレームワークです。 Vue のイベントバインディング機能は非常に強力で、ページ内のさまざまなインタラクションを処理できます。 Vueの開発過程ではイベントバインディング関数のパラメータがよく使われますが、この記事ではこの関数の使い方を詳しく紹介します。 Vue では、v-on ディレクティブを使用してイベントをバインドできます。 v-on ディレクティブの後には、イベント名とイベント処理関数が続きます。例: <bu

See all articles