5 Stimmen

jQuery ajaxStart gebunden mit eindeutigem Element

Ich habe den folgenden JS-Code

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

Mein Problem ist, dass jedes Mal, wenn ich auf die "Schaltfläche" oder "button1" klicken beide ajaxStart Ereignisse aufgerufen werden, obwohl die ajaxStart-Handler mit eindeutigen Elementen gebunden sind

Ich möchte nur eine ajaxStart aufrufen, die je nach der Schaltfläche, die ich anklicken, ist dies möglich?

UPDATE...

Nach dem Lesen der Antworten und auch herausfinden, dass es nicht möglich ist... kann jemand den Grund erklären, warum die ajaxStart mit einem Element gebunden werden kann?

Gracias

3voto

Gabriele Petrioli Punkte 182294

ajaxStart ist ein globales Ajax-Ereignis, d.h. alle ajaxStart-Ereignisse, die Sie binden, werden bei jedem Ajax-Aufruf ausgelöst, den Sie tätigen.

zitierend aus http://api.jquery.com/ajaxstart/

Immer, wenn eine Ajax-Anfrage gesendet werden soll, prüft jQuery, ob noch andere Ajax-Anfragen ausstehen. Wenn keine in Bearbeitung sind, löst jQuery das Ereignis ajaxStart aus. Alle Handler, die mit der Methode .ajaxStart() registriert wurden, werden zu diesem Zeitpunkt ausgeführt.

Wenn Sie für jeden Anruf etwas anderes wünschen, dann machen Sie einfach, was Sie in der Schaltfläche click.. wünschen.

etwas wie

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

Update

wie wäre es mit

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

0voto

T.J. Crowder Punkte 948310

Es scheint nichts übergeben worden zu sein, um ajaxStart damit Sie wissen, welche Ajax-Anfrage gestartet wurde. Aber da Ihre beiden Schaltflächen dieselbe Anfrage starten, würde Ihnen das vermutlich sowieso nicht helfen.

Am besten ist es wahrscheinlich, wenn Sie die Unterscheidung in Ihrer Schaltfläche vornehmen click Handler, anstatt zu versuchen, es in Ihrem ajaxStart Bearbeiter.

Aber wenn Sie es wirklich in der ajaxStart Handler können Sie eine Flag-Variable verwenden:

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

Das bringt Probleme mit sich:

  • Sie wollen eine Möglichkeit, diese Flag-Variable zu löschen, damit Sie keine Verweise auf DOM-Elemente herumliegen haben. (z.B. eine globale ajaxComplete Handler).
  • Wenn er bereits eingestellt ist, sollten Sie ihn nicht einstellen.
  • Sie koppelt die Tasten fest mit dem ajaxStart die Handler, was darauf hindeutet, dass es einen besseren strukturellen Ansatz gibt.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X