开发者社区> 问答> 正文

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

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
    }

 

展开
收起
爱吃鱼的程序员 2020-06-07 22:37:21 600 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

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

    好的谢谢哈,
    window.onload=function(){document.getElementById("subm").onclick=function(){alert("HelloWOrld");}}

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

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

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

    <divid="container"><divclass="text-area">文字<buttonclass="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都会触发事件吧

    有评论框架吗?

    没有因为我是搞后台的最近想接触一下前端,不太了解。请问有专门的评论框架?

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

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

    2020-06-07 22:37:31
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载