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

回答

相关问题