CODEWITHSUNDEEP
jqueryajaxjsonfunction
matt
matt

Reputation: 44293

jQuery Ajax function is fired multiple times? function call is kind of repetitive?

weird thing I can't find a reason for. I have a simple function that is triggered if a <a> element has an attribute called data-ajax-link. The attribute contains a simple url.

So if a link has this attribute I call the following function I prevent Default and call my ajaxFunction …

function ajaxLoadJson(loadUrl) {
    $.ajax({
        url: loadUrl,
        dataType: "text json",
        success: function(jsonObject,status) {

            notificationBoxOutput(jsonObject.status, jsonObject.data);
            console.log("function() ajaxLoadJson : " + status);

        },
        error: function(requestObject,status) {
            notificationBoxOutput("warning", "request not successfull, please try again");
            console.log("function() ajaxLoadJson : " + status);
        }
    });
}

The loadUrl parameter is the url in the data-ajax-link attribute I'm handing over to the function.

So MY PROBLEM

Imagine I have multiple links with this data-ajax-link attribute on my page. Each link performs a deletion-command back on the server. This works actually works fine however the ajaxLoadJson-Function I posted above gets fired twice if delete objects, three times if I delete three objects.

So again, if I click one of those links for the first time my console prints function() ajaxLoadJson : success. If I then click another of those links suddenly my console prints function() ajaxLoadJson : success another two times. And so on.

Any idea why this happens. The function should of course be triggered only once if a link is clicked.

Some more information

On domready I call the function interceptAjaxLinks() which makes sure all links with the class a.ajaxLink are triggerd as ajax link. So actually above I gave you some wrong information. I'm not listening for links with the attribute "data-ajax-link" but rather apply the function to all links with a class of "ajaxLink". If triggered I simply use the attr() selector to get the data-ajax-link attribute and pass it on to the ajaxLoadJson function.

$(document).ready(function(){
            interceptAjaxLinks();
});

function interceptAjaxLinks(targetBox) {

    console.log("function() interceptAjaxLinks : " + "start");

    if (targetBox == undefined) {
        targetBox = document;
    } else {
        targetBox = "div." + targetBox;
    }

    $(targetBox).find("a.ajaxLink").live('click', function(e) {
        e.preventDefault();

        ajaxLoadJson($(this).attr("data-ajax-link"));

    });

    console.log("function() interceptAjaxLinks : " + "end");
}

This function gets only triggered once just on domready.

HTML

My html structure looks like this.

<div class="nameListBox">

    <!-- name container start -->
    <div class="nameBox">

        <a href="/watch/72/a-new-name">
            <div class="infoBox">
                <div class="imageBox"></div>
                    <b>views:</b> 0
                    <b>comments:</b> 0
                </span>
            </div>
        </a>

        <div class="menuBox">
                <a href="/name/edit/72"><button class="button1">edit</button></a>
                <a href="/name/manage/72"><button class="button1">manage</button></a>
                <a href="#" class="ajaxLink deleteBtn" data-ajax-link="/ajax/name/delete/72"><button class="button1">delete</button></a>
        </div>

    </div>

    <!-- name container start -->
    <div class="nameBox">

        <a href="/watch/68/a-new-name">
            <div class="infoBox">
                <div class="imageBox"></div>
                    <b>views:</b> 0
                    <b>comments:</b> 0
                </span>
            </div>
        </a>

        <div class="menuBox">
                <a href="/name/edit/68"><button class="button1">edit</button></a>
                <a href="/name/manage/68"><button class="button1">manage</button></a>
                <a href="#" class="ajaxLink deleteBtn" data-ajax-link="/ajax/name/delete/68"><button class="button1">delete</button></a>
        </div>

    </div>

</div>

So I have multiple nameBox'es inside of my div.nameListBox. Each of those nameBox'es has a little menu with a "edit", "manage" and "delete" button. Only the "delete" button is a ajaxLink.

Upvotes: 0

Views: 2010

Answers (2)

chaZm
chaZm

Reputation: 404

I see several possible reasons.

1) Multiple event binding (maybe you call something similar to binding somewhere else. I don' belive in it much. But still who knows. Try to call die before calling live()

2)Try to add event bubbling prevention. There could be some issues with clicking on the container. And also just in case check if "this" is actually the clicked < a > element and not something else here :

ajaxLoadJson($(this).attr("data-ajax-link"));

Upvotes: 0

T9b
T9b

Reputation: 3502

You'll need to post more code, perhaps your HTML so we can see the structure of the DOM elements.

In my view the targetBox is probably binding to overlapping elements; possibly your container and the actual box itself.

My advice is to use the selector's id or class to precisely identify the element you want to invoke the code, not the document element.

Upvotes: 1

Related Questions