Solution to the problem of partial Ajax updates causing JS events to trigger repeatedly

  • 2020-03-30 04:07:38
  • OfStack

If you include a list of ajax updates in your page, you need to be careful about event handling for non-dynamic updates.

Take a list interface with a public toolbar:

| Menu1 | Menu2

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

ID the TITLE and DESCRIPTION of 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 does not reload as the list data is updated, the code above will have a duplicate click event (after the list has been updated many times).

So it's important to note that reinitialization of toolbar event listeners cannot be included in the result handling of an ajax list update.


Related articles: