前端页面求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3462 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

我用 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

2016-05-09 15:59:21 +08:00

你这个应该是新增元素绑定事件问题。
jQuery 是建议使用 .live() 。

bugsnail

2016-05-09 16:05:58 +08:00

@loading .delegate() .live() .bind()都试过, 不行.....

loading

2016-05-09 16:09:09 +08:00

建议打包一个代码上来，这样比较方便大家实验。

sox

2016-05-09 16:09:59 +08:00

.live 很早很早前就 deprecated 并 remove 掉了 233

jarlyyn

2016-05-09 16:12:32 +08:00

.on

loading

2016-05-09 16:12:57 +08:00

@sox 哦？我没用 jQuery 好久了，楼主，抱歉。。。

bugsnail

2016-05-09 16:20:07 +08:00

@loading 打包好了

地址: [http://7xiwkv.com1.z0.glb.clouddn.com/label.html][http://7xiwkv.com1.z0.glb.clouddn.com/label.html]

bugsnail

2016-05-09 16:21:45 +08:00

解析成两个了.......

是这个地址: [http://7xiwkv.com1.z0.glb.clouddn.com/label.html]

Biwood

2016-05-09 16:24:57 +08:00

$(document).on('click', '#add-test', function(e){
alert(111);
});

bugsnail

2016-05-09 16:27:25 +08:00

@Biwood 出来了, 谢谢, 铜币奉上!

但还是希望知道原因, 可以简单说一下, 或者给个参考链接?

Biwood

2016-05-09 16:38:07 +08:00

@bugsnail 关键词：“事件代理（委托）”，利用的 JavaScript 事件冒泡机制

learnshare

2016-05-09 16:40:16 +08:00

事件委托

bugsnail

2016-05-10 10:47:52 +08:00

@Biwood 谢谢, 确实是这个, jQuery1.9 已经推荐用 on 了

bugsnail

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

2016-05-10 12:32:36 +08:00

@bugsnail 看不到代码，很难找到问题所在，不过说实话，这类问题太基础了，建议你系统的学习一下 jQuery 的用法