需求描述:
Ajax获取的数据是一段Html代码并将原来DOM节点对应的内容替换掉。
如:获取到的内容为
<div><div class='one'> <div class='c'></div> <div class='d'></div> </div> </div>
原有DOM节点:
<div class='one'> <div class='a'></div> <div class='b'></div> </div>
实现:
$body.on('click', '.product-wrap .hover-panel .colors li', function () { var $this = $(this); $.ajax({ url: getUncachedUrl($this.data('url')), type: 'POST', success: function (data) { $this.closest('.one').html($('.one', data).html()); } }); return false; });
遇到的问题及注意:
1、若当页面的节点是通过Ajax添加的,那么不能通过类选择器直接为其绑定事件。
2、$this.closest('.a').html($('.a', data).html()); 替换DOM节点内容函数
3、JQuery不能直接替换最外层div。也就是说,当.one为最外层div时,不能实现替换。