動的に作成された elements_jquery にイベントをバインドするための jQuery メソッドインスタンス-jsチュートリアル-php.cn

動的に作成された elements_jquery にイベントをバインドするための jQuery メソッドインスタンス

WBOY

リリース： 2016-05-16 17:25:05

オリジナル

1098 人が閲覧しました

トピックに入る前に、まずフロントエンドページでよく使用される機能を見てみましょう。ページ上の入力ボックスをクリックするとテキストが自動的に選択されます。

入力ボックスの focus イベントを使用することは簡単に考えられます。入力ボックスがフォーカスを取得すると、jQuery select() メソッドが呼び出されます。

わかりました、アイデアは単純で、ロジックは正しいようです。具体的に、現実に実現できるか見てみましょう。

1. ページ上にフォームを作成し、いくつかの入力ボックスを配置します。コードは次のようになります。

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

>td>出生:

Chromium では、表示されるインターフェイスは次のようになります:

2. 次に、選択したボックス内のテキストをクリックするための JavaScript コードの作成を開始します。前のアイデアによれば、実装は次のようになります。

<🎜。 >コードをコピーコードは次のとおりです:

 
上記のコードには魔法のような機能があります。普通に。私も皆さんもそう思っているかもしれません

コードをコピー

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

var input = $(this); settimeout（function（）{コードは次のとおりです。 🎜> 🎜> });
2 つの記述方法はまったく同じコードである必要があるため、後者でも期待される効果を達成できるはずです。でも実は、2種目に切り替えたら効果がなくなったんです！テキストを自動的に選択する方法はありません。！

常人には理解できない高さです。

さて、戻って入力ボックスがどのようになっているのか見てみましょう。これで、入力ボックスにテキストがある限り、クリックすると自動的に選択され、マウスを放した後にテキストが戻ることはありません。非常に良いです。これが私たちが望んでいた効果です。

次に、この記事の本当のトピック、動的に作成されたページ要素に機能またはイベントハンドラーをバインドする方法を示します。

上記の関数について話しましょう。上記のコードは、このページでのみ、フォーカスを取得した後にテキストを自動的に選択する機能を備えたフォームページのニーズを解決する可能性があります。つまり、コード内に入力ボックスのフォーカスイベントにバインドされたハンドラーがあります。もちろん、このハンドラーは選択されたテキストです。

上記の説明が少しわかりにくい場合は、同じ点を私の人生で最もわかりやすい言葉でもう一度詳しく説明します。他のページにも入力ボックスがある場合、この効果を達成するには各ページで同じ段落コードを記述する必要がありますか? 。

または、現在のページで、ユーザーが対応する情報を入力した後、いくつかの入力ボックスを動的に生成します。その後生成されるこれらの入力ボックスに、テキストを選択するためのフォーカスを取得する機能も持たせるにはどうすればよいでしょうか。

デモンストレーションのために、ユーザーが名前を入力すると、ニックネームを入力するための入力ボックスを下に作成することが検出されます。後で JavaScript コードを通じて DOM に挿入されるこの入力ボックスは、他の入力ボックスと同じ効果を持たないことが予測できます。テキストの自動選択に使用するコードはページの読み込み時に実行され、後で挿入された入力ボックスはページの読み込み時には存在しないためです。

名前入力ボックスを監視するために新しく追加されたコードは次のとおりです:

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

$("input[name='name']").change(function () {
 ニックネーム:
 '< ;input type="text" name="ニックネーム" value=" />' 
 '& lt;/td & gt;' 
 '& lt;/troc & gt;') 
 }) 
 
 
 以下のページでテストしてください。名前に何を入力すればよいでしょうか。また、テストによって生成された入力ボックスでは、テキストを自動的に選択できません。 

動的に作成された elements_jquery にイベントをバインドするための jQuery メソッドインスタンス以下は、動的に作成された要素が以前にバインドされたイベントハンドラーを取得するためのメソッドです:

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

$("body").on('focus', "input", function () {

var input = $(this); input.select( );
This method is a bit tricky, but it is also the better method I know so far. Because before jQuery 1.9, there was actually a live() function specifically designed to do similar work. It could bind event handlers to elements that have not yet been created in the future. However, with the upgrade of jQuery version, It is not recommended to use this live() method. Since it is not advocated, there are natural reasons for it and I will not go into it in detail, just like before I went into detail about why jQuery abolished the function related to detecting browsers.

If we write the above method into the master page of the website, then we don’t have to write the same code on every page with an input box to achieve it, and it will also be applied to the later dynamically created elements. Effect.

The above example of the input box is just for demonstration. Of course, it is not limited to this example. It is still very common to deal with the need to dynamically create elements. At least I have encountered it several times in my projects, in different situations. . For example, in a page presented to users with insufficient permissions, some buttons need to be disabled, but the user can click Add to add a row, and each row will have a Delete and Modify button. At this time, disable can be applied to a table to add a new row. button in the row.

Walking to a water-poor place, sitting and watching the clouds rise