JQuery: 创建动态链接
本帖最后由 clearwater 于 2020-4-9 06:33 编辑以下代码是某教程的源码。我有几点不清楚，麻烦大神解释一下：
第56行： 为什么这里的a 不需要用$包起来？
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
第63行： 注释中提到a是动态创建的。但是为什么在代码中，我没有看到动态创建，如$( <a href=""></a>), 和把a, append/prepend，before, after到哪个元素上？
// $("ul a").click(function() {// 此时的click不能给动态创建的a添加事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() {// 此时的click不能给动态创建的a添加事件
// alert(11);
// })
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function() {
$(this).parent().slideUp(function() {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html> 感谢分享，找了好久 TomRoosevelt 发表于 2020-4-9 06:56
感谢分享，找了好久
我不知道你来论坛的目的是干嘛？
连帖子的内容都不看，就在这里胡扯？别说违反版规，你对得起自己的时间吗？灌水对你本人有什么好处？ 所有代码创建的DOM元素（就是你那个A标签），是在浏览器内存中的，右键查看源代码，永远看到的是修改DOM之前，或者说，浏览器第一次加载的时候的内容。
你需要通过F12工具来查看自己动态添加的元素等 第一个问题：
55行 var li = $("<li></li>");这里定义了li，所以下面li.html($(".txt").val()等于$("<li></li>").html($(".txt").val()
第二个问题：
$(function(){
}
是加载后执行，如果你在里面直接用click事件，有可能不能执行，因为a链接还创建，所以最好创建a元素绑定事件 kof21411 发表于 2020-4-9 08:37
第一个问题：
55行 var li = $("");这里定义了li，所以下面li.html($(".txt").val()等于$("").html($(".tx ...
又跟着复习了一遍{:301_997:} 我这学期 学jQuery了 看楼主的问题也不难 解答一下吧。
第56行： 为什么这里的a 不需要用$包起来？
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
答：在这里创建了一个Li变量 存放了上面html（）里面的内容， 请注意html()的用法获取时可以获取html元素，赋值也可以用文本拼接出来html元素
第63行： 注释中提到a是动态创建的。但是为什么在代码中，我没有看到动态创建，如$( <a href=""></a>), 和把a, append/prepend，before, after到哪个元素上？
// $("ul a").click(function() {// 此时的click不能给动态创建的a添加事件
答：动态创建在var li这个变量里面了如上一问的li.html而后用prepend 把创建的这个li 放到ul里的头部，
DOM操作有append prependappendTo prependTo before after InsertBefore insertafter
一班用append prepend就可以对于ul li来说是$( 1) .方法(2) 方法替换 只是改变 1 2的位置。。
具体的第一个填写ul 还是li 我也分不太清，试试就可以了。比较多 学习学习 逝去的初夏 发表于 2020-4-9 08:49
我这学期 学jQuery了 看楼主的问题也不难 解答一下吧。
第56行： 为什么这里的a 不需要用$包起来？
li.h ...
好像忘了一问，绑定事件的。因为啊 li是在网页执行后动态创建的，在入口函数里的直接绑定click事件只会对 文本加载前的对象绑定。而用on 进行绑定 有个'委托'的作用 你可以看两个on的用法，一种委托方式是把on绑定给父元素 同时参数里要带一个需要委托事件的子元素，事件，回调函数。另一种on就是参数事件名和函数 调用者为本身 还不是其父元素 li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
这里是直接设置li的innerHTML,后面的prepend执行后就添加了一个a到ul了
63行的注释说的就是上面的a,因为a是绑定的.btn的click事件响应中的,要click才会执行,如果用 $("ul a")的话,就是直接查找当前DOM中ul里面的a,此时还没有a,当然就无法给a绑定事件
后面的$("ul").on("click", "a" 是使用事件代{过}{滤}理, 在点击发生时,才去搜索a
页:
[1]
2