Jquery Click() Error - Nicht im Stack-Bereich

Okay, ich bin hier ratlos. Ich habe ein Steuerelement, das aus einer Tabelle besteht. Ich erlaube dem Benutzer, auf den Hyperlink in der unteren Zeile zu klicken, um direkt zur zugehörigen Ansicht zu gelangen.Jquery Click() Error - Nicht im Stack-Bereich

Auf der anderen Seite kann der Benutzer irgendwo anders in der Tabelle klicken und eine Auswahl getroffen werden. Diese Auswahl aktiviert eine Werkzeugleiste, die es dem Benutzer ermöglicht, bestimmte Aufgaben an dem ausgewählten Objekt auszuführen. Wenn der Benutzer erneut auf das ausgewählte Element klickt, möchte ich den Hyperlink programmatisch anklicken. Aber wenn ich die jQuery zum programmatischen Klicken auf einen Hyperlink ausführen, bekomme ich immer den Fehler "Out of Stack Space". Ich bin mir völlig bewusst, dass das Klick-Ereignis rekursiv aufgerufen wird, aber ich habe keine Ahnung, wie ich es verhindern kann! Hier ist mein Code ...

<head runat="server"> 
<title></title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<style> 
.mouseOver, .mouseOut, .selected 
{ 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    vertical-align: top; 
    display: inline-block; 
    margin: 5px; 
    cursor: pointer; 

} 
.mouseOver 
{ 
    border: solid thin #99defd; 
    background: #e9f8fe; 
} 
.mouseOut 
{ 
    border: solid thin White; 
} 
.selected 
{ 
    border: solid thin #e0a403; 
    background: #f8f4de; 
} 
</style> 

<script> 
(function($) { 
    $(document).ready(function() { 
     var $items = $('.mouseOut'); 
     $items.mouseenter(function() { 
      if ($(this).attr('class') != 'selected') 
       $(this).attr('class', 'mouseOver'); 
     }); 
     $items.mouseleave(function() { 
      if ($(this).attr('class') != 'selected') 
       $(this).attr('class', 'mouseOut'); 
     }); 

     $items.click(function() { 
      if ($(this).attr('class') == 'selected') { 
       $(this).find('a').click(); 
      } 
      else { 
       $('.selected').attr('class', 'mouseOut'); 
       $(this).attr('class', 'selected'); 
      } 
     }); 
    }); 
})(jQuery); 
</script> 
</head> 
<body runat="server"> 
    <form id="form1" runat="server"> 
     <table cellpadding="5" class="mouseOut"> 
      <tr> 
       <td> 
       user module thumbnail... 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <a id="A1" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl0$lnkBtn','')">Users</a> 
       </td> 
      </tr> 
     </table> 

     <table cellpadding="5" class="mouseOut"> 
      <tr> 
       <td> 
       stats module thumbnail... 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <a id="A2" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl1$lnkBtn','')">Stats</a> 
       </td> 
      </tr> 
     </table> 
    </form> 
</body>

Diese abgespeckte Version wird das Problem vollständig demonstrieren. Danke an alle, die helfen können!

Quelle

2012-03-26 RichardB

Was dieses Chaos ist '(function ($) {$ (document) .ready (function() {'? – j08691

@ j08691, es ist ein Verschluss. Es sieht nur wie ein Chaos, weil der Code nicht eingerückt ist. –

einfach um meine Neugierde zu befriedigen, was ist der Zweck, einen Abschluss so um den ready() - Aufruf zu wickeln? – Dave

Aus irgendeinem seltsamen Grund funktioniert diese Lösung.

ersetzen:

$(this).find('a').click();

mit:

window.location = $(this).find('a').attr('href');

Der Code, dass Frédéric Hamidi war toll zur Verfügung gestellt, aber der click() wurde nie wieder auf den Server veröffentlichen.

Quelle

2012-03-27 04:08:02 RichardB

es scheint Funktion __doPostBack nicht definiert ist, dass die Ursache des Fehlers sein kann

Quelle

2012-03-26 18:17:40

Das Problem ist, dass das Auslösen das click Ereignisses auf ein Nachkommen des Elements löst es auch an diesem Elemente, da das Ereignis den DOM-Baum sprudelt . Da Ihr Code das Ereignis click eines Nachkommens auslöst, während dasselbe Ereignis auf seinem Vorfahren behandelt wird, erfolgt eine unendliche Rekursion.

Ein Weg, um dieses Problem zu umgehen wäre stopPropagation() zu verwenden, um die click Ereignisse auf Ihrer Hyperlinks von sprudeln ausgelöst zu verhindern:

$(this).find("a").click(function(e) { 
    e.stopPropagation(); 
});

EDIT: Allerdings wird der Code oben nicht funktionieren wie erwartet, da sich Ihre Logik auch im Ereignishandler des Vorfahren befindet. Wir können unseren Ansatz für das Problem wechseln und event.target mit is() verwenden, um ein click-Ereignis auf dem Nachkommen-Hyperlink auszulösen, nur wenn das Ereignis, das wir gerade behandeln, entweder auf dem Vorgängerelement oder auf einem Nachkommen ausgelöst wurde, der selbst kein Hyperlink ist:

$items.click(function(event) { 
    if ($(this).attr('class') == 'selected' && !$(event.target).is("a")) { 
     $(this).find('a').click(); 
    } else { 
     $('.selected').attr('class', 'mouseOut'); 
     $(this).attr('class', 'selected'); 
    } 
});

Quelle

2012-03-26 18:28:11

Vielen Dank für den Beitrag. Der "Out of Stack Space" Fehler ist jetzt weg aber das Click Event wird nicht verarbeitet. Ich habe die hinzugefügt Code, den Sie gepostet und hinzugefügt haben: $ (this) .find ('a'). click() darunter. Beim Debugging wird das Click-Ereignis ausgelöst und der von Ihnen geschriebene Event-Handler verarbeitet e.stopPropagation(); Hier passiert nichts danach. – RichardB

Ah, du Dummkopf, Das liegt daran, dass deine Logik auch im "click" -Ereignis des Vorfahren liegt. Ich werde meine Antwort aktualisieren. –

Oh der Ärger!Das funktioniert auch in Bezug auf den "Out of stack space" -Fehler, aber es passiert immer noch nichts. Aufgrund Ihrer ausgezeichneten Code-Elemente kann ich kein Klickereignis für die gesamte Tabelle binden. Möglicherweise muss ich nur die Zeile mit dem Tag "a" zurücklassen, wenn das Klickereignis gebunden wird. – RichardB

Jquery Click() Error - Nicht im Stack-Bereich

Antwort

Verwandte Themen