js编写评论功能出现的疑惑,求解答

蛋炒饭加冰块 发布于 2017/11/20 16:40
阅读 247
收藏 0

1.首先,我用ajax获取了后端传过来的文本等内容,然后通过循环将每个文本主体内容都都通过append加入到一个div中。

2.然后文本主体内容中有个button:评论

3.现在想要通过获取button的id,使用getElementById的方式获取,然后用dom0级事件处理。

4.问题是:button是通过append加入到页面中的,我使用getElementById会出现以下错误:uncaught TypeError :cannot  set property  'onclick' of null

大致代码如下:

html:

<div id='content'></div>

javascript:

message = $("<button id='comment'>评论</button>">
content.append(message);

以上代码实现后有如下效果:

现在想点击“评论”后触发一些函数,但是javascript添加一下代码后报错:

var comment = document.getElementById('comment');
    comment.onclick = function(){
      //do something
    }

 

加载中
0
张亦俊
张亦俊

既然你有jQuery,为啥不用delegate呢

蛋炒饭加冰块
蛋炒饭加冰块
好的 谢谢哈,
0
亚林瓜子
亚林瓜子
window.onload = function(){
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
    }
}

https://stackoverflow.com/questions/17080502/uncaught-typeerror-cannot-set-property-onclick-of-null

蛋炒饭加冰块
蛋炒饭加冰块
回复 @亚林瓜子 : 哈哈
亚林瓜子
亚林瓜子
回复 @蛋炒饭加冰块 : 前端技术千千万万 犹如海底深 就这么收工吧
蛋炒饭加冰块
蛋炒饭加冰块
试过都不可以耶,但是直接在append的那个button上加onclick=fun(); 然后在javascript写个fun函数就可以
0
vikon
vikon

没看到你代码不知道,有可能是, 在你调用document.getElementById("subm").onclick的地方,ajax里面的append那些 html的代码还没执行. 虽然等append代码执行后. 注意ajax是异步的. 其他可能性就是id写错了.

0
不咬人
<div id = "container">
   <div class="text-area">
       文字
       <button class="comment">评论</button>
    </div>
</div>
document.getElementById('container').onclick = function(e) {
   if(e.target.classList.contains('comment')) {
      console.log(e.target)
   }
}

试试事件委托?

蛋炒饭加冰块
蛋炒饭加冰块
回复 @不咬人 : 好的 谢谢
不咬人
回复 @蛋炒饭加冰块 : 是会触发事件 但是因为判断了e.target,所以只会点到类名包含'comment'的元素才会执行if内的语句,这样不管comment如何动态添加 事件都会存在 不用反复给comment添加事件
蛋炒饭加冰块
蛋炒饭加冰块
这样的话我点击整个container都会触发事件吧
0
开源中国首席罗纳尔多
蛋炒饭加冰块
蛋炒饭加冰块
没有 因为我是搞后台的 最近想接触一下前端,不太了解。请问有专门的评论框架?
0
没文化不开心
没文化不开心

用jq里的on监听父元素点击,如果target是button就触发,都不需要button的id,如果原生就用addEventListener,总之就是事件委托,这样不但能监听动态添加的dom,还能减少绑定事件,不要用onclick

0
思念断叻弦
思念断叻弦

要是我 我就这么写,将你要触发的事件封装成方法,在append的时候 这么写<button onclick='你的方法'>评论</button>

返回顶部
顶部