Jquery Trigger call function multiple times

Question

I have this below function to delete the item from the list jquery ajax call. Now I want to reload the items so that I have using the trigger function.

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "FamilyManagerService.asmx/DeleteFreePurchasedFamily",
            dataType: "json",
            data: "{'FamilyId':'" + idFreeFamily + "'}",
            success: function (data) {
            }
        }).done(function () {
            if ($(".categoryList .activeFolder").length) {
                $.session.set("CategoryName", $(".categoryList .activeFolder").attr('id'));
                $.session.set("CategorynameView", $(".categoryList .activeFolder").text());
                $(".categoryList a").trigger("click");
            }
        });

Note: 1. Trigger Event fires all anchor link within this ´.categoryList a´ selector. 2. I want to fire that event only once.

Tried by including stopPropagation, stopImmediatePropagation, PreventDefault but it will fire multiple times.

$('.categoryList a').click(function (e) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FamilyManagerService.asmx/getPurchasedParameterType",
        dataType: "json",
        data: "{'categoryName':'" + categoryName + "', 'IsFreeFamily':'" + true + "'}",
        success: function (data) {
            //TODO:
        }
    });
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
});

Please suggest how I can call the event to fire only once.

Your selector .categoryList a tells it to fire all links — DontVoteMeDown
– DontVoteMeDown, Commented Dec 18, 2013 at 10:31
What is the context of first ajax request? Why trigger an event, why not calling the handler if a referenced function is used? — A. Wolff
– A. Wolff, Commented Dec 18, 2013 at 10:32
@DontVoteMeDown how can i call the event to fire only once ? — Selva
– Selva, Commented Dec 18, 2013 at 10:35

Paul D. · Accepted Answer · 2013-12-18 11:36:17Z

1

As DontVoteMeDown noted in the comments, if you have several elements in your HTML that correspond to .categoryList a then JQuery will trigger a click event on every element, and your function will be called several times.

You could try to be more specific in your JQuery selector when triggering the click. (Add a class or an ID to make sure only one link matches your selector).

OR (and probably a better solution)

Maybe your "triggering a click" approach is not appropriate. Just make the new call, by calling a function (similar to your click callback), without clicking.

var reloadItems = function(){
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FamilyManagerService.asmx/getPurchasedParameterType",
        dataType: "json",
        data: "{'categoryName':'" + categoryName + "', 'IsFreeFamily':'" + true + "'}",
        success: function (data) {
            //TODO:
        }
    });
}

and

 $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FamilyManagerService.asmx/DeleteFreePurchasedFamily",
        dataType: "json",
        data: "{'FamilyId':'" + idFreeFamily + "'}",
        success: function (data) {
        }
    }).done(function () {
        if ($(".categoryList .activeFolder").length) {
            $.session.set("CategoryName", $(".categoryList .activeFolder").attr('id'));
            $.session.set("CategorynameView", $(".categoryList .activeFolder").text());
            reloadItems();
        }
    });

which also simplifies your event handling (as A. Wolff commented):

$('.categoryList a').click(reloadItems);

edited Dec 18, 2013 at 11:36

answered Dec 18, 2013 at 10:35

Paul D.

2,02219 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Bhadra Over a year ago

even when u give class or id and trigger , it will be fired in a recursive manner, as the click function will be called recursively from with in

Paul D. Over a year ago

The click callback doesn't seem recursive to me. Am I missing something ? please explain :)

Bhadra Over a year ago

even if u give class to the link , the clicked element is one in this list of .categoryList a, so the function again starts going on recursively

Bhadra Over a year ago

the click function is again called in the success function ,so it ll be recursive+

A. Wolff Over a year ago

in onclick handler, this is not the same ajax request than the one which trigger click event. That's why i asked OP context of first ajax request and he is still unable to answer it...

|

Collectives™ on Stack Overflow

Jquery Trigger call function multiple times

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related