jQuery 单击函数与内联 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/815856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click function vs inline onclick
提问by ana
I'm trying to reorganize my code and make it more unobstrusive.
我正在尝试重新组织我的代码并使其更加不引人注目。
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.
主要是有一个用于执行操作的链接。如果您单击链接，则操作通过 ajax 执行（ajax 代码不在此处的代码中）并且文本被其他文本替换，为用户提供撤消操作的能力。如果用户单击“撤消”链接，ajax 将恢复先前的情况，并且提供用户执行操作的文本将再次显示。
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.
我在一个 html 文件（下面的代码）中制作了一个更简单的问题版本。有两段。如果您单击使用内联 onclick 调用的第一段的链接，代码将按预期工作。但是如果你点击第二段的链接，它使用了 jQuery onclick 函数，Undo 链接不起作用，我想不出为什么。
Any help? Thanks a lot!
有什么帮助吗？非常感谢！
<!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>
回答by Wolfr
Since you are dynamically adding new items to the DOM, you will have to register the click handler again on the new items.
由于您正在向 DOM 动态添加新项目，因此您必须在新项目上再次注册点击处理程序。
You can use .livefor this.
您可以.live为此使用。
Update
更新
Since jQuery 1.7, the .onmethod is preferred way to do this.
从 jQuery 1.7 开始，该.on方法是执行此操作的首选方法。
Since jQuery 1.9 the .livemethod has been removed.
自 jQuery 1.9 起，该.live方法已被删除。
回答by ken
Just demonstrating the use of .end() for a more fluid solution:
只是演示使用 .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();
});
});
回答by ana
Wow!! Thanks to all of you!
哇！！感谢大家！
I've read about the live event and final working code is:
我已经阅读了有关现场活动的信息，最终的工作代码是：
$(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;
});
Previously I used remove() for delete the text that offers to perform the action. I've changed it for hide/show so I don't have to use live also in the first function.
以前我使用 remove() 删除提供执行操作的文本。我已将其更改为隐藏/显示，因此我不必在第一个功能中也使用 live。
Thanks again!
再次感谢！
回答by Daniel A. White
Since you are dynamically adding new items to the DOM, you will have to register the clickhandler again on the new items. jQuery sets the handler when you call $('...').click(...).
由于您正在向 DOM 动态添加新项目，因此您必须click在新项目上再次注册处理程序。当您调用 .jQuery 时，jQuery 会设置处理程序$('...').click(...)。
回答by tvanfosson
The click handler isn't being picked up when you append the element to the DOM. Try using jQuery to register the click handler by changing the line(s) that look like:
当您将元素附加到 DOM 时，不会选择单击处理程序。尝试使用 jQuery 通过更改如下所示的行来注册点击处理程序：
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")
To
到
$("#" + 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;
});
You might be able to do it more simply, but it looks like you could be adding more than one span to the paragraph so I went conservative. You could also probably chain off append, but I thought the reselect made the point clearer.
您可能可以更简单地做到这一点，但看起来您可以为段落添加多个跨度，因此我采取了保守的态度。您也可以链接 append，但我认为重新选择使这一点更清晰。
