V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
bugsnail
V2EX  ›  问与答

前端页面求助

  •  
  •   bugsnail · 2016-05-09 15:51:29 +08:00 · 1246 次点击
    这是一个创建于 3102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想做一个如下图添加标签的功能

    我用 bootstrap 做好 popover 之后, 点击按钮, 是直接通过 jQuery 塞进一段 html 实现了弹出下图所示窗口,

    但是, jQuery 选择器死活不能获取弹出窗口的按钮和其它元素, 用了$(document).ready 也不行...

    JS 代码:

    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('#addTags').popover({
                html : true,
                title: function() {
                    return $("#popover-head").html();
                },
                content: function() {
                    return $("#popover-content").html();
                }
            });
    
            $('#addTags').click(function (e) {
                e.stopPropagation();
            });
    
            $(document).click(function (e) {
                if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
                    $('#addTags').popover('hide');
                }
            });
        });
    </script>
    

    求大神帮忙看看, 谢谢!

    PS:一直做后端, 也可能思路不对, 有更好的想法也希望分享一下.

    15 条回复    2016-05-10 12:32:36 +08:00
    loading
        1
    loading  
       2016-05-09 15:59:21 +08:00
    你这个应该是新增元素绑定事件问题。
    jQuery 是建议使用 .live() 。
    bugsnail
        2
    bugsnail  
    OP
       2016-05-09 16:05:58 +08:00
    @loading .delegate() .live() .bind()都试过, 不行.....
    loading
        3
    loading  
       2016-05-09 16:09:09 +08:00
    建议打包一个代码上来,这样比较方便大家实验。
    sox
        4
    sox  
       2016-05-09 16:09:59 +08:00
    .live 很早很早前就 deprecated 并 remove 掉了 233
    jarlyyn
        5
    jarlyyn  
       2016-05-09 16:12:32 +08:00
    .on
    loading
        6
    loading  
       2016-05-09 16:12:57 +08:00
    @sox 哦?我没用 jQuery 好久了,楼主,抱歉。。。
    bugsnail
        7
    bugsnail  
    OP
       2016-05-09 16:20:07 +08:00
    bugsnail
        8
    bugsnail  
    OP
       2016-05-09 16:21:45 +08:00
    解析成两个了.......

    是这个地址: [http://7xiwkv.com1.z0.glb.clouddn.com/label.html]
    Biwood
        9
    Biwood  
       2016-05-09 16:24:57 +08:00   ❤️ 1
    $(document).on('click', '#add-test', function(e){
    alert(111);
    });
    bugsnail
        10
    bugsnail  
    OP
       2016-05-09 16:27:25 +08:00
    @Biwood 出来了, 谢谢, 铜币奉上!

    但还是希望知道原因, 可以简单说一下, 或者给个参考链接?
    Biwood
        11
    Biwood  
       2016-05-09 16:38:07 +08:00   ❤️ 1
    @bugsnail 关键词:“事件代理(委托)”,利用的 JavaScript 事件冒泡机制
    learnshare
        12
    learnshare  
       2016-05-09 16:40:16 +08:00
    事件委托
    bugsnail
        13
    bugsnail  
    OP
       2016-05-10 10:47:52 +08:00
    @Biwood 谢谢, 确实是这个, jQuery1.9 已经推荐用 on 了
    bugsnail
        14
    bugsnail  
    OP
       2016-05-10 10:49:41 +08:00
    @learnshare
    @Biwood

    今天又遇到一个问题, 我点 添加 按钮的时候, 要获取 input 标签的值, 再把它放到上面去.
    可是, 下面又获取不到值了...


    $(document).on('click', '#tagNew', function(e){
    var val = $('#tagName').val();
    alert(val);
    });

    前端简直了, 这种问题一般怎么排查, 感觉前端出了 bug 根本无从下手
    Biwood
        15
    Biwood  
       2016-05-10 12:32:36 +08:00
    @bugsnail 看不到代码,很难找到问题所在,不过说实话,这类问题太基础了,建议你系统的学习一下 jQuery 的用法
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4274 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 05:29 · PVG 13:29 · LAX 21:29 · JFK 00:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.