JQuery delegate method implements AJAX request events without loss

After you bind the click event to an element, you encounter a problem: When you execute some AJAX request, the page is called again, and the click event in it fails.

For example, my paging is an AJAX request, but when I click on the next page, the generated element a will not have the Click event.

Problems when doing your own project:

Bulk Delete check box, when you click on the deletion of the jquery page write method to get all the value of the check box, direct smarty injection to the page is not a problem, when the query based on the condition (Ajax implementation), call the page to list records, click event Invalidation

Cause:The Ajax loading content is in $ (document). Ready () After the operation, this time to the binding function, the found element collection also does not include the content of Ajax loading, so the original no problem, after loading is not bound

Workaround:

1. rebind the event after the AJAX request succeeds
2. Using the jquery delegate (SEL,[TYPE],[DATA],FN) method, the Live () method is deprecated

$ (document). Delegate (' A ', ' click ', function () {blah ()})

The specified element ( which belongs to the child element of the selected element ) adds one or more event handlers and specifies the function to run when these events occur.

Event handlers that use the delegate () method apply to current or future elements, such as new elements created by a script.

Parameters:

selector: selector string for the element that the filter triggers the event.

type: One or more events attached to the element. Multiple event values are separated by a space. Must be a valid event.

Data : Additional data passed to the function

fn: a function that runs when an event occurs

$ (function () {

$ (' #deleted '). Delegate ("button", ' click ', function () {The >deleted of the selected element ----The button in the form as the form
checked = [];
$ (' input:checkbox:checked '). each (function () {
Checked.push ($ (this). Val ());
});
$ (' #getvalues '). val (checked); Setting properties for hidden fields
})

})

Perfect solution to the problem, hehe!

Extended:

In the old version of jquery, you can use the live function to respond to events, such as $ (' a '), when you need to respond to an event for a page content of a fragment that is loaded by Ajax on the page. Live (' click ', function () {blah ()});

In a newer version of jquery, the live function has been deprecated,

The reasons for deprecation can be consulted: http://www.cnblogs.com/dumuqiao/archive/2011/09/09/2172511.html

How to implement the function of the live function in the new version, that is, when the page fragment is loaded by Ajax, how does the content in this page fragment respond to related events?

There are several ways to do this, and this article only provides two simple types:

• One is to import jquery-migrate:https://github.com/jquery/jquery-migrate/directly, so that the live function can be used, but not optimized for performance.
• The other is to use the delegate function to achieve the function of live

  $ (document). Delegate (' A ', ' click ', function () {blah ()});

JQuery delegate method implements AJAX request events without loss