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元素。请问怎么去使用选择器去选择？

解决方案 »

  1.   

    问题看起来挺小，但涉及知识一点也不含糊，以下是我的理解，错误之处请其他朋友不吝指正。首先需要知道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并添加事件。<body>
    <div style="border: 1px solid gray;">
    div
    <p style="border: 1px solid gray; margin: 10px;">
    paragraph</p>
    </div>
    </body>
    <script type="text/javascript">
    $(document).ready(function () {
    $('div p').click(function () {
    alert('div p, click bind');
    }); $('div p').live('click', function () {
    alert('div p, click live');
    }); $('div').bind('click', function () {
    alert('div, click bind');
    }); $('div').live('click', function () {
    alert('div, click live');
    });
    });
    </script>弹出顺序依次是：
    div p, click bind
    div, click bind
    div p, click live
    div, click live结论是：bind()方法添加的事件先从里向外冒泡，live()方法添加的事件后从里向外冒泡。在主题中的案例使用live()方法，首先id为"a"的div内部创建新元素，点击新元素时，div先响应了click事件，把已经添加的元素删掉，再添加了表达式相同的新元素——旧的元素还没得来及响
    应live()方法添加的事件，新元素不会去响应，所以达不到效果。最后，替换html()为append()，你会看到live()的效果。
      

  2.   

    还可以使用one()进行一次绑定，于是代码分成两种。$("#a").click(function () {
    $("#a").append("<a href='#'>上海</a><a href='#'>北京</a><a href='#'>广州</a>");
    }); $("#a a").live('click',function () {
    alert($(this).html());
    });
    $("#a").one('click',function () {
    $("#a").html("<a href='#'>上海</a><a href='#'>北京</a><a href='#'>广州</a>");
    }); $("#a a").live('click', function () {
    alert($(this).html());
    });