Solution to the Problem of repeated triggering of JS events caused by partial Ajax updates, ajaxjs

Source: Internet
Author: User

Solution to the Problem of repeated triggering of JS events caused by partial Ajax updates, ajaxjs

If the page contains an ajax update list, you need to be careful when processing events that are not dynamically updated.

Take the list interface with a public toolbar as an example:

| Menu1 | Menu2

----------------------------------------------------------------------------

ID TITLE DESCRIPTION OPERATION

1 test1 hey test X -...

2 test2 why not X -...

----------------------------------------------------------------------------

$.ajax( .... data: { ... }, success: function(data) { $('Menu1').click( function(){ //do something } ); } )

Since the Menu1 interface is public and will not be reloaded with the update of the list data, the above Code will trigger a duplicate click Event (after the list is updated multiple times ).

Therefore, you must note that in the processing of ajax List update results, reinitialization of toolbar event listening cannot be included.


Multiple times trigger dynamic page loading, causing repeated js Loading

Repeated loading of js may take the following situations:
1. The function is redefined several times, but it will not be affected in the end.
2. Bind events to an element multiple times, so the trigger you mentioned appears multiple times.

PS: if this is the case of 2, we recommend that you remove event listening before binding events!

A simple example of Ajax partial refresh

After a text segment is selected on the current page, the text segment is still selected after refreshing. How can this problem be solved?
Analysis: to locate and select the refreshed text, do you need to execute the words recorded in the event (onbeforeunload) before refresh to be selected? Is it necessary to store the selected text (store cookies, transfer ajax to the session, and store other data storage programs such as databases), refresh the page and reload it, when loading is complete, execute the Js method (ajax) to obtain the selected text, and Js then selects and processes the selected text.
2. Where is Ajax generally used?
Ajax applications
For example:
1) Weibo

You do not need to refresh the page. The new Weibo posts will be displayed later. The implementation method should be within a period of time. The page will send an ajax request to the server to obtain the latest data, or dynamically splice html on the page and display it.
2) login scenario

After entering the account password, submit is submitted on the page to determine the account password information. That is, when you click Login, the account and password information sent to the server ajax will be returned for processing after the server determines.
There are still many application scenarios. The so-called partial ajax refresh really means to get new data through ajax requests and display the latest JavaScript operations in the same way as html updates.
3. Javascript that Ajax can implement is almost implemented.
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ). It can be seen that JavaScript is an application method in ajax. Ajax is still required for client asynchronous requests to obtain data, and JavaScript code alone cannot be used.

For more information about ajax, see w3school.com.cn/ajax/index.asp.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.