jquery html()修改后选择器有关问题
日期：2014-05-16 浏览次数：20296 次
jquery html()修改后选择器问题
问题一：
<div id="a"></div> //div 内容为空
$(function(){
$("#a").click(function(){
$("#a").html("<a href='#'>上海</a><a href='#'>北京</a><a href='#'>广州</a>");
});
});
当click后html内容改变后 我重新使用选择器选择刚刚添加那些内容
$(function(){
$("#a a").click(function(){
alert($(this).html());
});
});
此时点击添加后的内容“上海” 没有显示a元素中的内容 我查了原因 是选择器没有定位到这个id=a 下的这个a元素。
请问怎么去使用选择器去选择？
------解决方案--------------------
问题看起来挺小，但涉及知识一点也不含糊，以下是我的理解，错误之处请其他朋友不吝指正。
首先需要知道jQuery对象的bind()与live()，然后是DOM的事件冒泡概念。
bind()与live()：常规的绑定方式像$('#a').click(function(){...})是对$('#a').bind('click',function(){...})的简写
需要注意是：bind()方法不会对新创建的DOM对象生效，故新创建的内部元素('#a a')的click事件将不会触发，需要使用live()方法进行事件绑定。
事实上在这里，$('#a a').live('click',function(){...})仍然不能产生效果。
“DOM事件冒泡”指的是：子元素首先响应点击事件，然后通知父元素，父元素再作出响应（反向不在讨论之中）
从里向外是事件冒泡的默认方向，从这点来说，$('#a a')的click事件将先于$('#a')触发，但事情没有这么简单。
live()方法很特殊，它是事件委托，绑定在父元素上，再反向查找到匹配的子元素（本人这么理解不知道对不对）。虽然更具体的机制没有理解透，但可以简单验证：创建嵌套的DOM并添加事件。
问题一：
<div id="a"></div> //div 内容为空
$(function(){
$("#a").click(function(){
$("#a").html("<a href='#'>上海</a><a href='#'>北京</a><a href='#'>广州</a>");
});
});
当click后html内容改变后 我重新使用选择器选择刚刚添加那些内容
$(function(){
$("#a a").click(function(){
alert($(this).html());
});
});
此时点击添加后的内容“上海” 没有显示a元素中的内容 我查了原因 是选择器没有定位到这个id=a 下的这个a元素。
请问怎么去使用选择器去选择？
------解决方案--------------------
问题看起来挺小，但涉及知识一点也不含糊，以下是我的理解，错误之处请其他朋友不吝指正。
首先需要知道jQuery对象的bind()与live()，然后是DOM的事件冒泡概念。
bind()与live()：常规的绑定方式像$('#a').click(function(){...})是对$('#a').bind('click',function(){...})的简写
需要注意是：bind()方法不会对新创建的DOM对象生效，故新创建的内部元素('#a a')的click事件将不会触发，需要使用live()方法进行事件绑定。
事实上在这里，$('#a a').live('click',function(){...})仍然不能产生效果。
“DOM事件冒泡”指的是：子元素首先响应点击事件，然后通知父元素，父元素再作出响应（反向不在讨论之中）
从里向外是事件冒泡的默认方向，从这点来说，$('#a a')的click事件将先于$('#a')触发，但事情没有这么简单。
live()方法很特殊，它是事件委托，绑定在父元素上，再反向查找到匹配的子元素（本人这么理解不知道对不对）。虽然更具体的机制没有理解透，但可以简单验证：创建嵌套的DOM并添加事件。
- HTML code
<body>
<div style="border: 1px solid gray;">
div
<p style="border: 1px solid gray; margin: 10px;">
paragraph</p>
</div>
</body>
------解决方案--------------------
还可以使用one()进行一次绑定，于是代码分成两种。
- JScript code
$("#a").click(function () {
$("#a").append("<a href='#'>上海</a><a href='#'>北京</a><a href='#'>广州</a>");
});
$("#a a").live('click',function () {
alert($(this).html());
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
