jQuery klicken Sie auf Funktion vs inline onclick

Ich versuche, meinen Code zu reorganisieren und es unaufdringlicher zu machen.jQuery klicken Sie auf Funktion vs inline onclick

Hauptsächlich gibt es einen Link zum Ausführen einer Aktion. Wenn Sie auf den Link klicken, wird die Aktion über Ajax ausgeführt (der Ajax-Code ist hier nicht im Code enthalten) und der Text wird durch einen anderen Text ersetzt, der dem Benutzer die Möglichkeit bietet, die Aktion rückgängig zu machen. Wenn der Benutzer auf den Link Rückgängig klickt, stellt ajax die vorherige Situation wieder her und der Text, der dem Benutzer anbietet, führt die Aktion aus, die er erneut anzeigt.

Ich habe eine einfachere Version meines Problems in einer einzigen HTML-Datei (Code unten) gemacht. Es gibt zwei Absätze. Wenn Sie auf den Link des ersten Absatzes klicken, der den Inline-Onclick-Aufruf verwendet, funktioniert der Code wie erwartet. Aber wenn Sie auf den Link des zweiten Absatzes klicken, der jQuery onclick-Funktion verwendet, funktioniert der Undo-Link nicht, und ich kann nicht herausfinden warum.

Irgendwelche Hilfe? Danke vielmals!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
     $(function() {  
      $(".add2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .add2").remove(); 
       $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
       return false; 
      }) 
      $(".undoadd2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .actions").find("span.added, a.add2").remove(); 
       $("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>"); 
       return false; 
      }) 
     }); 

     function addPlace(placeId){ 
      $("#" + placeId + " .add").remove(); 
      $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>"); 
      return false; 
     } 

     function undoAddPlace(placeId){ 
      $("#" + placeId + " .actions").find("span.added, a.undoadd").remove(); 
      $("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>"); 
      return false; 
     } 
    </script> 

</head> 
<body id="home"> 
    <div class="place" id="3435910"> 
     <p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p> 
    </div> 

    <div class="place" id="3435912"> 
     <p class="actions"><a href="#" class="add2">Add place</a></p> 
    </div> 
</body> 
</html>

Quelle

2009-05-02 ana

Da Sie dynamisch neue Elemente in den DOM hinzugefügt werden, haben Sie die Click-Handler wieder auf die neuen Objekte zu registrieren.

Sie können dafür .live verwenden.

aktualisieren

Seit jQuery 1.7, die .on Methode wird bevorzugt Weg, dies zu tun.

Seit jQuery 1.9 wurde die Methode .live entfernt.

Quelle

2009-05-02 23:12:16 Wolfr

Live-funktioniert nur, wenn der Wähler genau das gleiche ist. In diesem Fall denke ich, dass der Selektor für jedes DOM-Element einzigartig ist. – tvanfosson

Danke @wolfr. Ich wusste nicht, dass das existiert. –

Große Antwort. Ich wusste, dass mein js-Code funktionierte, aber ich konnte nicht herausfinden, was passierte ... nachdem ich deine Antwort gelesen hatte, wurde mir klar, dass ich verbindlich war, Tags über asp.net mvc webgrid zu verankern ... nochmals danke für die Hilfe @Wolfr –

Da Sie dynamisch neue Elemente in den DOM hinzugefügt werden, werden Sie die click Handler wieder auf den neuen Artikel registrieren. jQuery legt den Handler fest, wenn Sie $('...').click(...) aufrufen.

Quelle

2009-05-02 23:11:14

Der Click-Handler wird nicht aufgerufen, wenn Sie das Element an das DOM anhängen. Versuchen Sie jQuery mit dem Click-Handler registrieren, indem Sie die Zeile zu ändern (n), die wie folgt aussehen:

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")

$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" >Undo</a>"); 
$('#' + placeId + " .actions").find("span:last").find("a").click(function() { 
    undoAddPlace(placeId); 
    return false; 
});

Sie könnten in der Lage sein, es einfach mehr zu tun, aber es sieht aus wie könnte man Fügen Sie dem Absatz mehr als eine Spanne hinzu, damit ich konservativ wurde. Sie könnten auch wahrscheinlich anhängen, aber ich dachte, die Neuauswahl machte den Punkt klarer.

Quelle

2009-05-02 23:22:39 tvanfosson

Wow !! Danke an euch alle!

ich über das Live-Event und letzten Arbeits Code gelesen habe ist:

$(function() {  
      $(".add2").click(function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .add2").hide(); 
       $("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
       return false; 
      }) 
      $('.undoadd2').live('click', function(){ 
       var placeId = $(this).parents(".place").attr("id"); 
       $("#" + placeId + " .actions").find("span.added, a.undoadd2").remove(); 
       $("#" + placeId + " .add2").show(); 
       return false; 
      });

Früher verwendete ich remove(), um den Text löschen, um die Aktion auszuführen bietet. Ich habe es für hide/show geändert, also muss ich Live nicht auch in der ersten Funktion verwenden.

Danke nochmal!

Quelle

2009-05-02 23:34:32 ana

demonstriert nur die Verwendung von .end() für eine flüssige Lösung:

$(function() {   
    $(".add2").click(function(){ 
      return $(this).parents(".place") 
       .find(".add2") 
        .hide() 
       .end() 
       .find(".actions") 
        .append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>"); 
    }); 
    $('.undoadd2').live('click', function(){ 
      return $(this).parents(".place") 
       .find(".actions") 
        .find("span.added, a.undoadd2") 
         .remove() 
        .end() 
       .end() 
       .find(".add2") 
        .show(); 
    }); 
});

Quelle

2009-05-03 11:02:51 ken

jQuery klicken Sie auf Funktion vs inline onclick

Antwort

Verwandte Themen