jQuery ajax成功

I am using jQuery with ajaxSuccess.

I have a preloaded HTML.

My jQuery code is:

abc();

function abc() {
$('.clickme').click(function() {
alert('');
// some ajax code and it will give some html //
});
 $('.secondClass').click(function()  {
     //some ajax code///

  });

}

The above code all in document ready function. Now, when I'm using ajaxSuccess function:

$(document).ajaxSuccess(function( event, request, settings ) { abc(); }

Now when I click on the .clickme class, it is sending multiple requests to the server.

How to solve this?

It is because whenever a ajax request is made you are adding a new handler to the targeted elements.

I think you are doing it to handle dynamically added elements, for that purpose instead of using ajax callback use event delegation

jQuery(function () {
    $(document).on('click', '.clickme', function () {
        alert('');
        // some ajax code and it will give some html //
    });
    $(document).on('click', '.secondClass', function () {
        //some ajax code///

    });
})

In such case there is no need to have the abc method.

Demo: Problem, Solution

No Need to write click events inside a method abc(). Just write directly inside document.Ready thats enough to achieve what you are trying to accomplish above

 $(document).ready(function() {
     $(document).on('click', '.clickme', function() {
         alert('');
         // some ajax code and it will give some html //
     });
     $(document).on('click', '.secondClass', function() {
         //some ajax code///

     });
 });

This wont trigger multiple requests.. Hope it helps