jQuery ajaxStart绑定了唯一元素

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>

我的问题是每当我单击"按钮"或"button1"时,即使ajaxStart处理程序绑定了唯一元素,也会调用ajaxStart事件

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

更新中...

在阅读了答案并发现它不可能之后......任何人都可以解释为什么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>