jQuery单击函数与内联onclick_Jquery_Onclick

jQuery单击函数与内联onclick

jquery

jQuery单击函数与内联onclick,jquery,onclick,Jquery,Onclick,我正试图重新组织我的代码，使其更不具条理主要是，有一个用于执行操作的链接。如果单击该链接，操作将通过ajax执行（此处的代码中没有ajax代码），文本将替换为其他文本，从而为用户提供撤消操作的能力。如果用户单击Undo链接，ajax将恢复以前的情况，并且提供给用户的文本将执行再次显示的操作我在一个html文件（下面的代码）中简化了我的问题。有两段。如果您单击第一段的链接，该链接使用内联onclick调用，代码将按预期工作。但是如果你点击第二段的链接，它使用jqueryonclick函数，撤销

我正试图重新组织我的代码，使其更不具条理

主要是，有一个用于执行操作的链接。如果单击该链接，操作将通过ajax执行（此处的代码中没有ajax代码），文本将替换为其他文本，从而为用户提供撤消操作的能力。如果用户单击Undo链接，ajax将恢复以前的情况，并且提供给用户的文本将执行再次显示的操作

我在一个html文件（下面的代码）中简化了我的问题。有两段。如果您单击第一段的链接，该链接使用内联onclick调用，代码将按预期工作。但是如果你点击第二段的链接，它使用jqueryonclick函数，撤销链接就不起作用，我也不知道为什么

有什么帮助吗？非常感谢

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


$（函数（）{
$（“.add2”）。单击（函数（）{
var placeId=$（this.parents（.place”）.attr（“id”）；
$（“#”+placeId+“.add2”）.remove（）；
$（“#”+placeId+”.actions”）.append（“Added！”）；
返回false；
})
$（“.undoadd2”）。单击（函数（）{
var placeId=$（this.parents（.place”）.attr（“id”）；
$（“#”+placeId+“.actions”）.find（“span.added，a.add2”）.remove（）；
$（“#”+placeId+“.actions”）。追加（“”）；
返回false；
})
});
函数addPlace（placeId）{
$（“#”+placeId+”.add”）.remove（）；
$（“#”+placeId+”.actions”）.append（“Added！”）；
返回false；
}
函数undoAddPlace（placeId）{
$（“#”+placeId+“.actions”）.find（“span.added，a.undoadd”）.remove（）；
$（“#”+placeId+“.actions”）。追加（“”）；
返回false；
}

由于要向DOM动态添加新项，因此必须在新项上再次注册

单击处理程序。jQuery在调用$（“…”）时设置处理程序。单击（…）

因为您正在动态添加新的
要将项目添加到DOM，您必须
在上再次注册单击处理程序
新项目
你可以用这个

更新
由于jQuery1.7，该方法是实现这一点的首选方法
自jQuery 1.9以来，该方法已被删除。
当您将元素附加到DOM时，单击处理程序未被拾取。尝试使用jQuery注册单击处理程序，方法是更改如下所示的行：
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>")

$（“#”+placeId+“.actions”）.append（“Added！”）

到
$（“#”+placeId+“.actions”）.append（“Added！”）；
$（'#'+placeId+“.actions”）.find（“span:last”）.find（“a”）.click（function（）{
undoAddPlace（placeId）；
返回false；
});

你也许可以做得更简单一些，但看起来你可以给这段增加不止一个跨度，所以我采取了保守的态度。你也可以把append链接起来，但我认为重新选择会让这一点更清楚。
哇！！谢谢大家
我已经阅读了有关现场活动的信息，最终工作代码是：
$(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;
            });

$（函数（）{
$（“.add2”）。单击（函数（）{
var placeId=$（this.parents（.place”）.attr（“id”）；
$（“#”+placeId+“.add2”）.hide（）；
$（“#”+placeId+”.actions”）.append（“Added！”）；
返回false；
})
$（'.undoadd2'）.live（'click'，function（）{
var placeId=$（this.parents（.place”）.attr（“id”）；
$（“#”+placeId+“.actions”）.find（“span.added，a.undoadd2”）.remove（）；
$（“#”+placeId+“.add2”）.show（）；
返回false；
});

以前我使用remove（）来删除提供执行该操作的文本。我将其更改为hide/show，因此我不必在第一个函数中也使用live
再次感谢！
仅演示如何使用.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();
    });
});

$（函数（）{
$（“.add2”）。单击（函数（）{
return$（this.parents（“.place”）
.find（“.add2”）
.hide（）
(完)
.find（“.actions”）
.append（“Added！”）；
});
$（'.undoadd2'）.live（'click'，function（）{
return$（this.parents（“.place”）
.find（“.actions”）
.find（“span.added，a.undoadd2”）
.删除（）
(完)
(完)
.find（“.add2”）
.show（）；
});
});
Live只有在选择器完全相同的情况下才会工作。在这种情况下，我认为选择器对于每个DOM元素都是唯一的。谢谢@wolfr。我不知道这是存在的。回答很好。我知道我的js代码工作了，但不知道发生了什么……在阅读了你的答案后，我意识到我绑定到了通过asp.net mvc呈现的锚定标记webgrid…再次感谢@Wolfr的帮助
$(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();
    });
});