10

我正在尝试重新组织我的代码并使其更加不引人注目。

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

我在一个 html 文件（下面的代码）中制作了我的问题的更简单版本。有两段。如果您单击使用内联 onclick 调用的第一段的链接，则代码将按预期工作。但是如果你点击第二段的链接，它使用了 jQuery onclick 功能，Undo 链接不起作用，我不知道为什么。

有什么帮助吗？非常感谢！

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

5 回答 5

16

由于您正在向 DOM 动态添加新项目，因此您必须在新项目上再次注册点击处理程序。

你可以用.live这个。

更新

从 jQuery 1.7 开始，该.on方法是执行此操作的首选方法。

自 jQuery 1.9 以来，该.live方法已被删除。

于 2009-05-02T23:12:16.560 回答
4

只是演示使用 .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-03T11:02:51.110 回答
2

哇！！感谢大家！

我已经阅读了现场活动，最终的工作代码是：

$(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-02T23:34:32.513 回答
2

由于您正在向 DOM 动态添加新项目，因此您必须click在新项目上再次注册处理程序。jQuery 在您调用$('...').click(...).

于 2009-05-02T23:11:14.550 回答
1

当您将元素附加到 DOM 时，不会拾取单击处理程序。尝试使用 jQuery 通过更改如下所示的行来注册单击处理程序：

$("#" + 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-02T23:22:39.780 回答