用js动态添加的标签如何绑定事件

hyx 2019-03-06 11:10:19 151次 0

用js动态添加的标签在后面不能直接绑定事件,之前改一个特效的一些功能发现可以如此绑定事件,现在又遇到了,想不起怎么做,搜索搜不出,想了好久才想起在哪写的,翻出来用,果然能行。

 现是用在本站上的评论上,想实现评论的头像是从数据库里获取,没选择时是随机头像,也可选择头像,选择头像时所有头像通过ajax从后台获取展示,每个头像都有选中的事件。

列出头像并赋予相中头像事件如下:



 function head_img_set(data) {
        var imglist="";
        var len=data.length;
        for (var i=0;i<len;i++){
            imglist+="<div class='col-31'> <img src='"+data[i]['url']+"' data-id='"+data[i]['id']+"'/></div>";
        }
        imglist+="<div class='clear'></div>";
        $(".head_img_list").append(imglist);
        /*img绑定事件*/
        var btn = $(".head_img_list img");
        if (btn) btn.bind("click",function () {
            checkimg(this);
        });
    }
    /*选中头像*/
    function checkimg(obj) {
        /*当前图片高亮*/
        $(".head_img_list img").removeClass("active");
        $(obj).addClass("active");
        var img_id=$(obj).data("id");
        $('.headimg_input').val(img_id);
    }


之前搜索是关键字选取的不好,没找出,后来改了关键字搜索,搜出了一些做法

方法1

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d2">
			动态生成a标签
		</div>
		
		<div id="d3">
			<input type="button" value="生成a标签" id="btn"/>
			
		</div>
	</body>
	<script>
		$(function() {
			///点击按钮,给d2动态添加标签
			$('#btn').bind('click', function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("<li onclick='show()'>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的,没有任何东西,但是方法是会触发的(不能这样打印自己)
			alert("哈哈");
		}
	</script>



方法2

	<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d2">
			生成a标签
		</div>
		
		<div id="d3">
			<input type="button" value="生成a标签" id="btn"/>
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function(event) {
			    /* 在添加标签的同时给添加的标签绑定点击事件 */
			    $("<li>Hello</li>").appendTo("#d2").bind('click', function() {
			      /* 显示标签的内容 */
			      alert($(this).text());  ///这种方式也可以正常打印出 hello
			    });
  			});
  			
		})
	</script>



方法3


<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<div id="d1">
			测试静态标签的绑定方法
		</div>
		<br />
		
		<div id="d2">
			动态生成a标签的位置
		</div>
		<div id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</div>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function() {
			    /* 在添加标签的同时给添加的标签绑定点击事件 */
			    $("<li>Hello</li>").appendTo("#d2");
  			});
  			
  			///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用
  			///用live方法才好用
  			$('li').live('click', function() {
			   alert($(this).text());///注意,用live还可以这样写,结果是正常的
			   alert("haha");
  			});
  			
  			///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
  			$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
			   alert($(this).text());///注意,用live还可以这样写,结果是正常的.这是非常重要的
			   alert("haha");
  			});
		})
	</script>


发表评论

注:*为必填

回复 的评论
*
选择
*
*