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参数是我正在移交给函数的data-ajax-link属性中的url。

所以我的问题

想象一下，我的页面上有这个data-ajax-link属性的多个链接。每个链接在服务器上执行删除命令。这个工作实际上工作正常但是我上面发布的ajaxLoadJson-Function如果删除对象会被触发两次，如果删除三个对象则会被触发三次。

所以，如果我第一次点击其中一个链接，我的控制台会打印function() ajaxLoadJson : success。如果我然后突然点击其他链接，我的控制台再打印function() ajaxLoadJson : success两次。等等。

知道为什么会这样。如果点击链接，该功能当然只能被触发一次。

更多信息

在domready上我调用函数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>

所以我的div.nameListBox里面有多个名字框。这些名称盒中的每一个都有一个带有“编辑”，“管理”和“删除”按钮的小菜单。只有“删除”按钮才是ajaxLink。

Answer 1

您需要发布更多代码，也许是您的HTML，以便我们可以看到DOM元素的结构。

在我看来，targetBox可能与重叠元素有关;可能是你的容器和实际的盒子本身。

我的建议是使用选择器的id或类来精确识别要调用代码的元素，而不是document元素。

Answer 2

我看到几个可能的原因。

1）多个事件绑定（也许你在其他地方调用类似绑定的东西。我不相信它。但仍然有谁知道。在调用live（）之前尝试调用die

2）尝试添加事件冒泡prevention。点击容器可能会出现一些问题。并且以防万一“是”实际上是否点击了＆lt; a＆gt;元素，而不是其他东西：

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

jQuery Ajax函数被多次触发？函数调用是一种重复吗？

2 个答案: