JQuery: 创建动态链接

clearwater · 发表于 2020-4-9 06:32

本帖最后由 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添加事件

[JavaScript] 纯文本查看 复制代码

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

感谢分享，找了好久

clearwater · 发表于 2020-4-9 06:58

TomRoosevelt 发表于 2020-4-9 06:56
感谢分享，找了好久

我不知道你来论坛的目的是干嘛？　

连帖子的内容都不看，就在这里胡扯？别说违反版规，你对得起自己的时间吗？灌水对你本人有什么好处？

masterkoko · 发表于 2020-4-9 08:30

所有代码创建的DOM元素（就是你那个A标签），是在浏览器内存中的，右键查看源代码，永远看到的是修改DOM之前，或者说，浏览器第一次加载的时候的内容。
你需要通过F12工具来查看自己动态添加的元素等

kof21411 · 发表于 2020-4-9 08:37

第一个问题：
55行 var li = $("<li></li>");这里定义了li，所以下面li.html($(".txt").val()等于$("<li></li>").html($(".txt").val()
第二个问题：
$(function(){
}
是加载后执行，如果你在里面直接用click事件，有可能不能执行，因为a链接还创建，所以最好创建a元素绑定事件

a361690548 · 发表于 2020-4-9 08:46

kof21411 发表于 2020-4-9 08:37
第一个问题：
55行 var li = $("");这里定义了li，所以下面li.html($(".txt").val()等于$("").html($(".tx ...

又跟着复习了一遍

逝去的初夏 · 发表于 2020-4-9 08:49

我这学期学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 prepend  appendTo prependTo before after InsertBefore insertafter
一班用append prepend就可以  对于ul li来说是$( 1) .方法(2) 方法替换只是改变 1 2的位置。。
具体的第一个填写ul 还是li 我也分不太清，试试就可以了。比较多

GK_k · 发表于 2020-4-9 08:50

学习学习

逝去的初夏 · 发表于 2020-4-9 08:54

逝去的初夏发表于 2020-4-9 08:49
我这学期学jQuery了看楼主的问题也不难解答一下吧。
第56行：　为什么这里的a 不需要用$包起来？
li.h ...

好像忘了一问，绑定事件的。因为啊 li是在网页执行后动态创建的，在入口函数里的直接绑定click事件只会对文本加载前的对象绑定。而用on 进行绑定有个'委托'的作用你可以看两个on的用法，一种委托方式是把on绑定给父元素同时参数里要带一个需要委托事件的子元素，事件，回调函数。另一种on就是参数事件名和函数调用者为本身还不是其父元素

boxer · 发表于 2020-4-9 09:05

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

帐号		自动登录	找回密码
密码			注册[Register]

[求助] JQuery: 创建动态链接

免费评分