jQuery ajaxStart与唯一元素绑定

我有以下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>

$（文档）.ready（函数（）{
$（“#innerDiv1”）.ajaxStart（函数（）{
警报（$（this.attr（“id”）+“ajaxStart”）；
});
$（“#innerDiv2”）.ajaxStart（函数（）{
警报（$（this.attr（“id”）+“ajaxStart”）；
});
$（“#按钮”）。单击（函数（）{
$.post（“test.aspx”）；
});
$（“#按钮1”）。单击（函数（）{
$.post（“test.aspx”）；
});
});

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

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

更新

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

---

谢谢

ajaxStart

是一个全球性的Ajax事件。。这意味着您绑定的所有ajaxStart事件都将在每次Ajax调用中触发

引用

无论何时发送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>

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#innerDiv1”）.html（'1开头'）；
$.post（“test.aspx”）；
});
$（“#按钮1”）。单击（函数（）{
$（“#innerDiv2”）.html（'2开头'）；
$.post（“test.aspx”）；
});
});

---

更新

怎么样

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

函数showProgress（elementId）{
$（'#'+elementId）.append（''）；
}
函数hideProgress（elementId）{
$（'#'+elementId）.find（'.progress'）.remove（）；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
变量id='innerDiv1'；
显示进度（id）；
$.post（“test.aspx”，function（）{hideProgress（id）；}）；
});
$（“#按钮1”）。单击（函数（）{
变量id='innerDiv2'；
显示进度（id）；
$.post（“test.aspx”，function（）{hideProgress（id）；}）；
});
});

似乎没有传递到

ajaxStart

的任何信息，您可以知道启动了什么ajax请求。但是，由于您的两个按钮都启动了相同的请求，我想这对您没有任何帮助

您最好的选择可能只是处理按钮

单击处理程序中的差异，而不是尝试在
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
处理程序紧密耦合，这表明有更好的结构化方法
但这仍然会调用两个ajaxStarthandlers@Ryan：对。您可以在它们中使用
ajaxRequestedBy
来确定是否要执行任何操作；这就是你所说的变量ajaxRequestedBy的意思吗？@Ryan:不，我指的是我在代码中写的东西。然后在
ajaxStart
处理程序中，检查
ajaxRequestedBy
变量以查看按下了哪个按钮。但这不是我上面建议的。我在上面建议的是“…只是在你的按钮点击处理程序中处理区别，而不是在你的
ajaxStart
处理程序中尝试处理它。”@Gaby的说法与此基本相同。我使用这个ajaxStart通过将html附加到父div$（this）来显示加载条，这就是为什么我以后需要ajaxStart和ajaxStop