gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:11:12 25 4
gpt4 key购买 nike

我有这段代码,它添加了一个新行,其中包含我希望可单击的链接。它创建了两个 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>

谢谢

最佳答案

您创建 ID 为 we ( <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

关于javascript - jquery动态添加div标签并在其中添加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27574299/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com