jQuery method instance for binding events to dynamically created elements_jquery

Before entering the topic, let’s first look at a function that is often used on front-end pages: automatically selecting text when clicking on the input box on the page.

It is easy to think of using the focus event of the input box. When the input box gains focus, the jQuery select() method is called.

Okay, the idea is simple and the logic seems correct. Specifically, let’s take a look at whether it can be realized in reality.

1. Construct a form on the page and put several input boxes. The code looks like this.

Copy code The code is as follows:

                                                                
                                                   
                                                                                        ;Age:
           
                                                                    tr>
                                                  ;
                                                                                                                                                                                 🎜>           < ;/td>
                       ;
                                                "email" name="email" value=" " />
                                                                              td>Birth:
                                                                                                                           
                                                                                
The interface that comes out is almost like this in Chromium:

2. Then start writing our JavaScript code to realize clicking the text in the selected box. According to the previous idea, the implementation should almost look like the following:

Copy code The code is as follows:

There is something magical about the above code that works normally. That’s what I and everyone may think





Copy code

The code is as follows:

var input = $(this); setTimeout (function () {                                                                                                                                                                                                                                                                                                The code is as follows:

var input =$(this);
setTimeout(function () {
🎜> });


The two writing methods should be exactly the same code, so the latter should also be able to achieve the expected effect. But in fact, after switching to the second type, the effect disappeared! There is no way to get text to be automatically selected! !

This is a height that ordinary people cannot understand.

Okay, let’s go back and see how our input box looks like now. Now as long as there is text in the input box, it will be automatically selected when you click it and it will not bounce back after you release the mouse. Very good, this is the effect we want.

The following is the real topic of this article, how to bind features, or event handlers, to dynamically created page elements.

Let’s talk about the function above. The above code may solve the needs of a form page. On this page, and only on this page, the input box has the feature of automatically selecting text after gaining focus. In other words, we have a handler bound to the focus event of the input box in our code. Of course, this handler is the selected text.

If the above statement is a bit confusing, I will elaborate on the same point again in the most straightforward language in my life: If other pages also have input boxes, should each page write the same paragraph? code to achieve this effect.

Or on the current page, after the user fills in the corresponding information, we dynamically generate some input boxes, and how can these subsequently generated input boxes also have the function of getting focus to select text.

For demonstration, we detect that if the user enters Name, we create an input box below to enter a nickname. It can be predicted that this input box that is later inserted into the DOM through JavaScript code will not have the same effect as other input boxes. Because the code we use to automatically select the text is executed when the page is loaded, and the input box inserted later does not exist when the page is loaded.

The following is the newly added code for monitoring the name input box:

Copy the code The code is as follows:

$("input[name='name']").change(function () {
                                                                                               Nick name:'
                                                                 ''
'& lt;/td & gt;'
'& lt;/troc & gt;')
})


Page below to test, what can you just enter in the name. And the input box generated by the test cannot automatically select the text.

The following is a method for dynamically created elements to get previously bound event handlers:

Copy code The code is as follows :

$("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