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

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

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

通常实现方法

<h1 id="one">这是一个标签</h1>

1、jq

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

（1）on

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

JQ
<script language="javaScript">
	jQuery(document).ready(function($) {
		$("#box").on("click",function(){
           searchBox()
         })
	}
	function echoMsg() {
		alert("输出标签")
	}
</script>

（2）attr

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

JQ
<script language="javaScript">
	jQuery(document).ready(function($) {
		$("one").attr("onclick",echoMsg())
	}
	function echoMsg() {
		alert("输出标签")
	}
</script>

2、js

先获取标签，再用setAttribute方法

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

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

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

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