Question

我有这个代码，它添加了一个新行，其中包含我想要点击的链接。它创建了两个div标签，我想在.we div中添加html。我尝试了不同的组合，但似乎没有任何效果

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="test"></div>
    <input type="button" id="add" value="Add New Line" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#add").click(function () {
                var id = new Date().getTime();
                var common_fields = "<div style='background-color:#f0f0f0' class='move_line'><div id='we'></div><input type='hidden' value=''>" + 
                    "<a href='#' class='new_user'>Add User</a><br /><br />Common field 1: <input type='text' id='" + id + "'/>&nbsp;<hr></div>";
                $("#test").append(common_fields);
            });

            $("body").on("click", ".new_user", function () {
                $(this).closest("div.move_line").closest("div.we").append("<span>prosper</span>");
            });

        });
    </script>
</body>
</html>

由于

Answer 1

您使用我们的ID（<div id='we'>）创建div，但随后使用CLASS we {"div.we"）查找div。请注意，ID无论如何都必须是唯一的。closest()搜索DOM，而您希望.find()搜索后代。

这可以纠正这些错误：

 $("#add").click(function () {
     var id = new Date().getTime();
     var common_fields = "<div style='background-color:#f0f0f0' class='move_line'><div class='we'></div><input type='hidden' value=''>" +
         "<a href='#' class='new_user'>Add User</a><br /><br />Common field 1: <input type='text' id='" + id + "'/>&nbsp;<hr></div>";
     $("#test").append(common_fields);
 });
 $("body").on("click", ".new_user", function () {
     $(this).closest("div.move_line").find("div.we").append("<span>prosper</span>");
 });

<强> jsFiddle example

jquery动态添加div标签并在其中添加元素

1 个答案: