jQuery 点击函数 vs 内联 onclick [英] jQuery click function vs inline onclick
问题描述
我正在尝试重新组织我的代码并使其更加不引人注目.
主要是有一个执行动作的链接.如果单击链接，则通过 ajax 执行操作(此处代码中没有 ajax 代码)，并且文本被其他文本替换，为用户提供撤消操作的能力.如果用户单击撤消链接，ajax 会恢复以前的情况，并且提供给用户的文本会再次执行它所显示的操作.
我在单个 html 文件中制作了一个更简单的问题版本(代码如下).有两段.如果您单击使用内联 onclick 调用的第一段的链接，则代码将按预期工作.但是如果你点击第二段的链接，它使用了jQuery onclick 功能，Undo 链接不起作用，我不知道为什么.
有什么帮助吗?非常感谢！
");返回假；}功能 undoAddPlace(placeId){$("#" + placeId + ".actions").find("span.added, a.undoadd").remove();$("#" + placeId + ".actions").append("<a class='add' onclick='addPlace("" + placeId + ""); return false;' href='#'>添加地点</a>");返回假；}</脚本></头><body id="家"><div class="place" id="3435910"><p class="actions"><a href="#" onclick="addPlace('3435910'); return false;"class="add">添加地点</a></p></div><div class="place" id="3435912"><p class="actions"><a href="#" class="add2">添加地点</a></p></div></身体></html>由于您是动态添加新的项目到 DOM，你将不得不再次注册点击处理程序新项目.
您可以为此使用 .live.p><小时>
更新
从 jQuery 1.7 开始，.on 方法是首选方式这样做.
从 jQuery 1.9 开始，.live 方法已被删除.
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.
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.
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>
Since you are dynamically adding new items to the DOM, you will have to register the click handler again on the new items.
You can use .live for this.
Update
Since jQuery 1.7, the .on method is preferred way to do this.
Since jQuery 1.9 the .live method has been removed.
这篇关于jQuery 点击函数 vs 内联 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
