JQuery bedingte preventDefault() feuern, wenn nicht

Question

Ich habe das folgende Skript, das ich geschrieben habe.

<script> 
    $(document).ready(function(){ 
     $('a').data('loop',true); 
     $('body').on('click', 'a', function(event){ 
     console.log($(this).data('loop')); 
     if ($(this).data('loop') == 'true') { 
      console.log('hit'); 
      event.preventDefault(); 
      caller = $(this); 
      $(this).data('loop',false); 
      var linkref = $(this).attr('href'); 
      var linkpos = $(this).offset(); 
      var screenwidth = $(window).width(); 
      var json_data = JSON.stringify({linkref: linkref, linkpos: linkpos, screenwidth: screenwidth}); 
      $.ajax({ 
      url: "content/submitcontenthandler?handler=core/_dashboard&method=tracking_ping", 
      method: "POST", 
      data: "json=" + json_data, 
      complete: function (jqXHR, status) { 
       console.log(status); 
       console.log(caller); 
       $(caller).click(); 
      } 
      }); 
     } else { 
      console.log(event.isDefaultPrevented()); 
      console.log('miss'); 
      $(this).data('loop',true); 
     } 
     }); 
    }); 
    </script> 

Es funktioniert, sendet mir die Details, die ich will usw. usw. ABER !!!

Wenn ich auf einen Link klicke, feuert er mir die Details über Ajax ab, dann soll er das Ereignis erneut "klicken", was er tut! aber das Ereignis feuert nicht normal ab. Wenn ich also auf einen Link zu einer anderen Seite klicke, würde ich auf diese andere Seite gehen ... das passiert nicht.

Wenn ich die Zeile auskommentieren event.preventDefault(); Dann das Ereignis ausgelöst wird, wie ich erwarten würde ...

mir So sieht es aus wie das Event.preventDefault selbst ausführt, wenn es nicht gemeint ist während des zweiten Anrufs sein ...

Sorry, wenn dies a etwas kompliziert zu verstehen. Ich verstehe nicht ganz, was selbst passiert. Ist es möglicherweise ein Fehler, oder hat etwas, das ich getan habe, das verursacht?

Ich dachte nicht, dass ich könnte, aber ich habe erfolgreich ein jsfiddle dafür gemacht. https://jsfiddle.net/atg5m6ym/2001/

Answer 1

Sie können dies versuchen und sich keine Sorgen über die "Schleife" mehr:

$(document).ready(function() { 
    $('body').on('click', 'a', function (event) { 
     event.preventDefault(); 
     var caller = $(this); 
     var linkref = $(this).attr('href'); 
     var linkpos = $(this).offset(); 
     var screenwidth = $(window).width(); 
     var json_data = JSON.stringify({linkref: linkref, linkpos: linkpos, screenwidth: screenwidth}); 
     $.ajax({ 
      url: "content/submitcontenthandler?handler=core/_dashboard&method=tracking_ping", 
      method: "POST", 
      data: "json=" + json_data, 
      complete: function (jqXHR, status) { 
       console.log(status); 
       console.log(caller); 
       window.location.href = linkref; // Redirect happens here 
      } 
     }); 

    }); 
}); 

UPDATE

Es gibt ein paar Probleme hier ist zu beachten:

1) don Einige Links‘ t erfordern eine Umleitung (wie erwähnt, Bootstrap-Modell-Links, die das Anzeigen/Verbergen oder in Dokumentenanker steuern

Um dies zu korrigieren i Es kommt wirklich auf den Fall an.In der Regel fügt Bootstrap den Links bestimmte Klassen oder Datenattribute hinzu, so dass Sie etwas tun können.

$('body').on('click', 'a:not(list of things to exclude)'.. 

Persönlich würde ich stattdessen die Links definiere ich als verfolgen wollte:

<a href=<link> data-tracked='true'... 

<script> 
     $('body').on("click","a[data-tracked='true']"... 

Oder wenn Sie mit wenigen Ausnahmen die meisten Links zu verfolgen, können Sie:

 <a href=<link> data-tracked='false'... 
    <script> 
      $('body').on("click","a:not([data-tracked='false'])"... 

oder allgemeiner:

<script> 
     $('body').on("click","a", function() { 
      if ($(this).attr("data-tracked") == "false" || <you can check more things here>){ 
        return true; //Click passes through 
      } 
      //Rest of the tracking code here 
     }); 

Answer 2

Die folgende if-Anweisung wahr zurück, wenn das data-loop Attribut eines Element existiert gegen, unabhängig von seinem Wert:

if ($(this).data('loop')) { 

Es muss geändert werden, um den Wert zu überprüfen:

if ($(this).data('loop') == 'true') { 

Wenn Sie etwas zuweisen, um den Wert eines Elementattributs zu erhalten, wird es zu einer Zeichenfolge und benötigt daher einen Zeichenfolgenvergleich.

Answer 3

Event.preventDefault() wird nicht zum zweiten Mal ausgeführt.

Linkumleitung findet statt, wenn die Methode abgeschlossen ist. Also in Ihrem Fall wird Umleitung passieren, wenn complete Methode von Ajax Anruf abgeschlossen ist.

nehmen wir an, wir haben event1 und event2 Objekt im Code. event1 ist das Objekt in der Ajax-Aufrufmethode und event2 ist das Ereignisobjekt in der rekursiven Aufrufmethode (Second Call).

Wenn also zum zweiten Mal geklickt wird, haben wir noch complete Methode ausgeführt werden. sobald es zur complete Methode des Ajaxaufrufs zurückkommt, findet es das Ereignis1 hat preventDefault property true und es umadressiert nicht.

Answer 4

Try t sein;)

$(document).ready(function(){ 
    $('body').on('click', 'a', function(event){ 
    event.preventDefault(); 

    var caller = $(this); 
    var linkref = $(this).attr('href'); 
    var linkpos = $(this).offset(); 
    var screenwidth = $(window).width(); 

    var json_data = JSON.stringify({ 
     linkref: linkref, 
     linkpos: linkpos, 
     screenwidth: screenwidth 
    }); 

    $.ajax({ 
     url: "content/submitcontenthandler?handler=core/_dashboard&method=tracking_ping", 
     method: "POST", 
     /* To temprary block browser; */ 
     async: false, 
     data: "json=" + json_data, 
     complete: function(jqXHR, status){ 
     /* add class **ignore** to a element you don't want to redirect anywhere(tabs, modals, dropdowns, etc); */ 
     if(!caller.hasClass('ignore')){ 
      /* Redirect happens here */ 
      window.location.href = linkref; 
     } 
     } 
    }); 

    }); 
});