jQuery點擊功能vs內聯onclick

我試圖重新組織我的代碼，並使其更加不顯眼。jQuery點擊功能vs內聯onclick

主要是有一個執行動作的鏈接。如果你點擊鏈接，這個動作是通過ajax執行的（ajax代碼不在代碼中），文本被其他文本取代，爲用戶提供撤銷動作的能力。如果用戶單擊撤銷鏈接，則ajax將恢復先前的情況，並向用戶提供的文本執行再次顯示的操作。

我在單個html文件（下面的代碼）中提出了一個更簡單的問題版本。有兩段。如果您點擊第一段使用內聯onclick調用的鏈接，代碼將按預期工作。但是，如果你點擊第二段使用jQuery onclick函數的鏈接，撤銷鏈接不起作用，我不知道爲什麼。

任何幫助？非常感謝！

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

來源

2009-05-02 ana

你既然是動態添加新項目到DOM，你將不得不上的新項目再次註冊單擊處理程序。

您可以使用.live這個。

更新

由於jQuery的1.7，該.on方法是優選的方法來做到這一點。

由於jQuery 1.9的.live方法已被刪除。

來源

2009-05-02 23:12:16 Wolfr

如果選擇是完全一樣的活纔有效。在這種情況下，我認爲選擇器對每個DOM元素都是唯一的。 – tvanfosson 2009-05-02 23:14:30

你既然是動態添加新項目的DOM，你將不得不在新的項目再次註冊click處理。當您致電$('...').click(...)時，jQuery設置處理程序。

來源

2009-05-02 23:11:14

將元素附加到DOM時，不會拾取點擊處理程序。嘗試使用jQuery的註冊單擊處理通過改變看起來像線（S）：

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

你也許可以做到這一點更簡單，但它看起來像你可以爲該段增加一個以上的跨度，所以我保守了。你可能也可能會追加附加，但我認爲重新選擇使得這一點更清晰。

來源

2009-05-02 23:22:39 tvanfosson

哇！感謝大家！

我讀過有關現場直播和最後的工作代碼爲：

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

以前我使用remove（）方法用於刪除提供了執行該操作的文本。我改變了它的隱藏/顯示，所以我不必在第一個功能中使用live。

再次感謝！

來源

2009-05-02 23:34:32 ana

只是展示瞭如何使用.END（）的一個更流暢的解決方案：

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

來源

2009-05-03 11:02:51 ken

jQuery點擊功能vs內聯onclick

回答

相關問題