jq（jq）实现对html标签（元素）动态添加onclick事件

您所在的位置：网站首页 › 给a标签添加点击事件 › jq（jq）实现对html标签（元素）动态添加onclick事件

jq（jq）实现对html标签（元素）动态添加onclick事件

2024-04-05 09:23| 来源: 网络整理| 查看: 265

原本很简单的一个功能，却花了我1天时间，所以很有必要记下来

原因是我采用了jq，而网站是采用一款名为SuperSlider的jq插件，这个插件会导致onclick里的事件自动触发

通常实现方法这是一个标签 1、jq

jq实现给元素动态添加onclick方法有on和attr以及其他

（1）on

jq1.7版本会报错：“on is not a function” ，百度过都说用1.8的版本，因此我改用1.8.3版本的jq库，完美运行

JQ jQuery(document).ready(function($) { $("#box").on("click",function(){ searchBox() }) } function echoMsg() { alert("输出标签") } （2）attr

1.7.几版本的jq库也可以运行

JQ jQuery(document).ready(function($) { $("one").attr("onclick",echoMsg()) } function echoMsg() { alert("输出标签") } 2、js

先获取标签，再用setAttribute方法

JS jQuery(document).ready(function($) { var obj = document.getElementById('one') obj.setAttribute("onclick","echoMsg()") } function echoMsg() { alert("输出标签") }

上面这个例子比较简单，但我遇到的问题是在父子元素间，增加或去除onclick事件。

所以一开始我求助群里的大神，他们觉得是冒泡事件引起的。实际上并不是，因为我试过remove子标签，再通过jq的append创建新标签也会执行onclick里的函数（就是因为SuperSlider插件引起的）。后来我改用原生js函数setAttribute解决问题

之所以记录这边文章，是想提醒自己，当正常使用函数会出现意想不到的结果时，要去注意是不是不是本身代码有问题，而是其他地方影响到这个结果，要多方位思考，不要过于固执一个点

【本文地址】

jq（jq）实现对html标签（元素）动态添加onclick事件

jq（jq）实现对html标签（元素）动态添加onclick事件

今日新闻

推荐新闻