CODEWITHSUNDEEP
javascriptajaxjquery
Selva
Selva

Reputation: 527

Jquery Trigger call function multiple times

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.

Upvotes: 2

Views: 1728

Answers (1)

Paul D.
Paul D.

Reputation: 2022

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);

Upvotes: 1

Related Questions