前端页面求助

[bugsnail]

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

我用 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:一直做后端, 也可能思路不对, 有更好的想法也希望分享一下.

[loading]

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

[bugsnail]

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

[loading]

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

[sox]

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

[jarlyyn]

.on

[loading]

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

[bugsnail]

@loading 打包好了

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

[bugsnail]

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

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

[Biwood]

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

[bugsnail]

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

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

[Biwood]

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

[learnshare]

事件委托

[bugsnail]

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

[bugsnail]

@learnshare
@Biwood

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


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

前端简直了, 这种问题一般怎么排查, 感觉前端出了 bug 根本无从下手

[Biwood]

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