JQuery Ajax функция запускается несколько раз?вызов функции отчасти повторяется?

Question

странная вещь, для которой я не могу найти причину.У меня есть простая функция, которая срабатывает, если элемент <a> имеет атрибут с именем data-ajax-link.Атрибут содержит простой URL-адрес.

Поэтому, если ссылка имеет этот атрибут, я вызываю следующую функцию, которая запрещает использование по умолчанию, и вызываю мою функцию 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);
        }
    });
}

Параметр loadUrl является URL-адресом.в атрибуте data-ajax-link я передаю эту функцию.

Итак МОЯ ПРОБЛЕМА

Представьте, что у меня есть несколько ссылок с этим атрибутом data-ajax-link на моей странице.Каждая ссылка выполняет команду удаления на сервере.На самом деле это работает нормально, однако ajaxLoadJson-Function, который я опубликовал выше, срабатывает дважды, если удаляются объекты, и три раза, если я удаляю три объекта.

Итак, еще раз, если я нажимаю одну из этих ссылок в первый раз, когда моя консольпечатает function() ajaxLoadJson : success.Если я вдруг нажму на другую из этих ссылок, моя консоль напечатает function() ajaxLoadJson : success еще два раза.И так далее.

Есть идеи, почему это происходит.Функция, разумеется, должна запускаться только один раз, если щелкнуть ссылку.

---

Дополнительная информация

При готовности я вызываю функцию interceptAjaxLinks(), которая вызываетУбедитесь, что все ссылки с классом a.ajaxLink запускаются как ссылки ajax.Так что на самом деле выше я дал вам некоторую неверную информацию.Я не слушаю ссылки с атрибутом «data-ajax-link», а применяю функцию ко всем ссылкам с классом «ajaxLink».При срабатывании я просто использую селектор attr(), чтобы получить атрибут data-ajax-link и передать его в функцию ajaxLoadJson.

$(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");
}

Эта функция срабатывает только при срабатыванииоднажды только на domready.

---

HTML

Моя структура HTML выглядит следующим образом.

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

Итак, у меня есть несколько nameBox'оввнутри моего div.nameListBox.У каждого из этих nameBox'ов есть небольшое меню с кнопками «редактировать», «управлять» и «удалять».Только кнопка «Удалить» является ajaxLink.

Answer 1

Вам нужно будет разместить больше кода, возможно, HTML, чтобы мы могли видеть структуру элементов DOM.

На мой взгляд, targetBox, вероятно, связывается с перекрывающимися элементами;возможно, ваш контейнер и сама коробка.

Мой совет - использовать идентификатор или класс селектора для точной идентификации элемента, для которого вы хотите вызвать код, а не элемента document.

Answer 2

Я вижу несколько возможных причин.

1) Связывание с несколькими событиями (возможно, вы называете что-то похожее на связывание где-то еще. Я не очень верю в это. Но все же кто знает. Попробуйте позвонить die перед вызовом live ()

2) Попробуйте добавить всплывающее событие предотвращение . При нажатии на контейнер могут возникнуть проблемы. А также на всякий случай проверьте, является ли «this» на самом деле элементом , по которому щелкнули, а не чем-то другим здесь:

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