使用js动态添加点击事件时，click与onclick的区别

最新推荐文章于 2024-09-25 17:14:42 发布

湛湛似岁

最新推荐文章于 2024-09-25 17:14:42 发布

阅读量2.5w

点赞数 1

分类专栏： js基础

js基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在做项目的时候遇到了一个问题，就是通过js动态绑定事件的问题。在网上收索了下，然后自己写了一个个很简单的DOM实验了一下！

1、jsp代码

<body>

<p>定义第一个添加按钮</p>

</br>

<p>定义一个DIV</p>

</div>

</body>

2、js代码

$(function(){

//给添加按钮，首先使用click的方式

$(“#oneAdd”).click(function(){

//在div里面添加第二个按钮

console.log(“点击了第一个按钮”)

$(“#div”).html(“<input type=’button’ value=’第二个按钮’ id=’twoAdd’ />”);

})

//给第二个按钮一个添加事件，同样是使用click的方式

//第一个方法

/*$(“#twoAdd”).click(function(){

console.log(“点击了第二个按钮”)

})

//第二个方法

$(“#twoAdd”).on(“click”,function(){

console.log(“点击了第二个按钮”)

})*/

//第三个方法

$(“#div”).on(“click”,”#twoAdd”,function(){

console.log($(this).attr(“type”))

//取消按钮一的点击事件

$(“#oneAdd”).off(“click”);

})

</script>

3、结果

点击第一个按钮可以正常触发cilck事件，

当启用方法一时，按钮无法正常触发click事件

当启用方法二时，按钮无法正常触发click事件

当启用方法三时，按钮可以正常触发click事件

4、总结

1、在页面初始化的时候已经给定固定的id时，cilck和onclick都可以正常使用；

2、当页面动态加载一个id时，使用click将失去作用，必须使用onclick才可以正常运行；

3、element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意，on前面的元素必须在页面初始化的时候就存在静态页里面，这也是为什么方法而不能正常使用的原因。

5、参考

一、 http://blog.csdn.net/webzhuce/article/details/53981556

二、 http://blog.csdn.net/jalon2015/article/details/46535777

<div class="readall_box csdn-tracking-statistics tracking-click readall_box_nobg" data-mod="popu_596" style="display: none;">
    <div class="read_more_mask"></div>
    <a class="btn btn-large btn-gray-fred read_more_btn" target="_self">阅读全文</a>
</div>

    <div id="digg" articleid="72687052">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

             <dt>顶</dt>
            <dd>1</dd>
        </dl>


        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

              <dt>踩</dt>
            <dd>1</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>