动态生成的内容再次点击时失效

最新推荐文章于 2024-09-14 18:52:56 发布

iteye_53

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量107

点赞数

分类专栏： JS 文章标签： javascript ViewUI

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现这样一个功能，跟淘宝类似的在下单时选择地址，同时可以更改默认地址，点击切换文字

<ul class="address-list clearfix">
				<li class="on">
					<div class="alpad">
						<p class="alname"><span class="cHtml"><i class="almo">默认地址</i></span><strong>林志颖1 收</strong></p>
						<p class="f12">浙江省&nbsp;&nbsp;杭州市&nbsp;&nbsp;上城区<br/>平海路14号平海公寓403室<br/>352229********0019<br/>137****377</p>
						<span class="aldoing"><a href="javascript:void(0)">修改</a>|<a href="javascript:void(0)" class="aldel">删除</a></span>
					</div>
				</li>
				<li>
					<div class="alpad">
						<p class="alname"><span class="cHtml"><a href="javascript:void(0)" class="bemo">设为默认</a></span><strong>林志颖2 收</strong></p>
						<p class="f12">浙江省&nbsp;&nbsp;杭州市&nbsp;&nbsp;上城区<br/>平海路14号平海公寓403室<br/>352229********0019<br/>137****377</p>
						<span class="aldoing"><a href="javascript:void(0)">修改</a>|<a href="javascript:void(0)" class="aldel">删除</a></span>
					</div>
				</li>
			</ul>

    $(".bemo").click(function(){
    	var almo = $("<i class='almo'>默认地址</i>");
    	var bemo = $("<a href='javascript:void(0)' class='bemo'>设为默认</a>");
    	var otheralmo = $(this).parents("li").siblings().find(".almo");
    	$(this).parent().html(almo);
        otheralmo.parent(".cHtml").html(bemo);
    });

一开始是这样写的，点击当前元素，更换内容，后来发现这样走第一遍是可以的，第二遍就走不动了。百度了很久，不知道什么原因，后来查到，动态生成的元素，要用on来进行js切换；

$('.demo').click(function(){})//这种写法 dom中现在有的bemo类会绑定事件，也就是说页面中原本就存在的元素都会被绑定事件，而后来新加的bemo元素就没有这个事件了；
$(document).on("click",".bemo",function(){})，所有的bemo类元素都会执行这个事件不管是新加的还是后加的；

正确的编写方式是：

    $(document).on("click",".bemo",function(){
    	var almo = $("<i class='almo'>默认地址</i>");
    	var bemo = $("<a href='javascript:void(0)' class='bemo'>设为默认</a>");
    	var otheralmo = $(this).parents("li").siblings().find(".almo");
    	$(this).parent().html(almo);
		otheralmo.parent(".cHtml").html(bemo);
    });