Question

我有以下JS代码

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv1").ajaxStart(function () {
            alert($(this).attr("id") + " ajaxStart");
        });

        $("#innerDiv2").ajaxStart(function () {
            alert($(this).attr("id") + " ajaxStart");
        });

        $("#button").click(function () {
            $.post("test.aspx");
        });

        $("#button1").click(function () {
            $.post("test.aspx");
        });
    });
</script>

我的问题是每当我点击“button”或“button1”时，即使ajaxStart处理程序绑定了唯一元素，也会调用ajaxStart事件

我想只调用一个ajaxStart，根据我点击的按钮，这可能吗？

... UPDATE

在阅读答案并发现不可能之后......有人能解释为什么ajaxStart可以与元素绑定吗？

由于

Answer 1

ajaxStart是一个全局Ajax事件..这意味着您绑定的所有ajaxStart事件将在您进行的每个Ajax调用中触发..

引自http://api.jquery.com/ajaxstart/

每当要发送Ajax请求时，jQuery都会检查是否还有其他未完成的Ajax请求。如果没有进行，jQuery会触发ajaxStart事件。 此时已执行已使用.ajaxStart（）方法注册的所有处理程序。

如果您希望每次通话都有不同的内容，那么只需按一下按钮即可。

类似

<script type="text/javascript">
    $(document).ready(function () {
        $("#button").click(function () {
            $("#innerDiv1").html('start of 1');
            $.post("test.aspx");
        });

        $("#button1").click(function () {
            $("#innerDiv2").html('start of 2');
            $.post("test.aspx");
        });
    });
</script>

<强>更新

怎么样

<script type="text/javascript">
    function showProgress(elementId){
      $('#' + elementId).append('<div class="progress"></div>');
    }
    function hideProgress(elementId){
      $('#' + elementId).find('.progress').remove();
    }

    $(document).ready(function () {
        $("#button").click(function () {
            var id = 'innerDiv1';
            showProgress( id );
            $.post("test.aspx", function(){hideProgress( id );});
        });

        $("#button1").click(function () {
            var id = 'innerDiv2';
            showProgress( id );
            $.post("test.aspx", function(){hideProgress( id );});
        });
    });
</script>

Answer 2

似乎没有传递给ajaxStart的任何内容，让您知道启动了什么ajax请求。但是，由于你的两个按钮都开始相同的请求，我想这无论如何都无济于事。

您最好的选择可能只是处理按钮click处理程序中的区别，而不是尝试在ajaxStart处理程序中处理它。

但如果您真的想在ajaxStart处理程序中执行此操作，则可以使用标志变量：

$(document).ready(function () {
    var ajaxRequestedBy;

    $("#innerDiv1").ajaxStart(function () {
        alert($(this).attr("id") + " ajaxStart");
    });

    $("#innerDiv2").ajaxStart(function () {
        alert($(this).attr("id") + " ajaxStart");
    });

    $("#button").click(function () {
        ajaxRequestedBy = this;
        $.post("test.aspx");
    });

    $("#button1").click(function () {
        ajaxRequestedBy = this;
        $.post("test.aspx");
    });
});

问题：

您需要一种方法来清除该标志变量，这样您就不会有对DOM元素的引用。（例如，全球ajaxComplete处理程序。）
如果已经设置，您可能希望避免设置它。
它将按钮与ajaxStart处理程序紧密结合，表明存在更好的结构方法。

jQuery ajaxStart绑定了唯一元素

2 个答案: