jQuery click函数与内联onclick [英] jQuery click function vs inline onclick
问题描述
我正在尝试重新组织我的代码，以使其更简洁.
I'm trying to reorganize my code and make it more unobstrusive.
主要，有一个用于执行动作的链接.如果单击链接，则操作将通过ajax执行(此处的代码中没有ajax代码)，并且该文本被其他文本替换，从而使用户可以撤消该操作.如果用户单击撤消"链接，则ajax将还原以前的情况，并向用户提供执行该操作的文本再次显示.
Mainly, there is a link for performing an action. If you click on the link, the action is performed via ajax (the ajax code is not on the code here) and the text is replaced by other text, offering the user the ability of undo the action. If the user click the Undo link, ajax restore the previous situation and the text offering the user perform the action it's shown again.
我在单个html文件(下面的代码)中做了一个简单的版本.有两段.如果单击使用内联onclick调用的第一段的链接，则代码将按预期工作.但是，如果您单击使用jQuery onclick函数的第二段的链接，则撤消"链接将不起作用，并且我不知道为什么.
I've made a simpler version of my problem in a single html file (code below). There are two paragraphs. If you click on the link of the first paragraph, which uses inline onclick call, the code works as expected. But if you click on the link of the second paragraph, which uses jQuery onclick function, the Undo link doesn't work, and I can't figure out why.
有帮助吗?非常感谢！
<!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>
推荐答案
由于您正在动态添加新 项目到DOM，您将不得不 再次注册点击处理程序 新项目.
Since you are dynamically adding new items to the DOM, you will have to register the click handler again on the new items.
您可以为此使用 .live .
You can use .live for this.
更新
从jQuery 1.7开始，首选 .on 方法.
Since jQuery 1.7, the .on method is preferred way to do this.
从jQuery 1.9开始， .live 方法已被删除.
Since jQuery 1.9 the .live method has been removed.
这篇关于jQuery click函数与内联onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
