代码:
<html>
    <head>
        <title>Have a try</title>
    </head>
    <script src="jquery-1.8.3.js"></script>
    <script>
        $(function(){
        $("#button_1").click(function(){
            $("#div_1").html("<button class='panel'>ki</button>");
        });
        $(".panel").click(function(){
            alert("it works!");
        });
    });
    </script>
    <body>
        <button id="button_1">Hi</button>
        <div id="div_1"></div>
    </body>
</html>
我知道这个代码无法运行,而且也知道怎样改写能让这些代码好使,比如改写成:
 $(function(){
        $("#button_1").click(function(){
            $("#div_1").html("<button class='panel'>ki</button>");
            $(".panel").click(function(){
                 alert("it works!");
            });
        }); 
    });

...
   $("#div_1").html("<button class='panel'>ki</button>");
   $(".panel").click(run());
 ...
function run(){alert();}
但问题是,我就想知道,为什么第一种写法无法触发
$(".panel").click(function(){alert("it works!");});
也就是说:用jQuery/JS动态载入新的元素,无法触发已有代码中对这些新载入元素的相应处理代码。因为这些script代码在页面加载时已经被浏览器获取了,为何没有效果,我始终想不明白。
所以跪求解释,如果解释得透彻一些,或者启发、点拨,都十分感谢javascriptjquery

解决方案 »

  1.   

    $(".panel").live("click",function(){alert("it works!");});
    live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
      

  2.   

    动态添加的元素用live或delegate方法绑定。
      

  3.   

      $(function(){
            $("#button_1").click(function(){
    //因为下面这句话是在你点击了button_1之后才会向页面添加panel,
                $("#div_1").html("<button class='panel'>ki</button>");
            });
             //而当这句话被执行的时候,你还没有点击button_1,所以页面上这时通过$('.panel');选择器还选择不到panel,$('选择器')默认是在整个页面上选择元素,除非$('选择器',context);
            $(".panel").click(function(){
                alert("it works!");
            });
        });
      

  4.   

    就如2楼说的用live绑定事件live其实就是因为利用dom的事件机制是冒泡上去的,最终会冒泡到document上,所以live原理就是在doc的点击事件中监听你用live绑定的事件,例如用live绑定click事件
    $('.panel').live('click',function(){
    // dosth
    })
    在doc中会做类似这种操作
    $(document).click(function(e){
       var $target = $(e.target);
       if ($targe.attr('class') === 'panel'){
           fn.call($targe);
       }
    })所以当你给a元素live了事件,但是如果你在a元素的父元素b中相同的事件做了return false(阻止冒泡的动作),live就失效了,这是因为事件没有冒泡到doc中去
      

  5.   

    第一种$(".panel")在文档准备好就绑定了 而当前文档还没生成呢 所以为空
    第二种实在.panel生成后再绑定
      

  6.   

    测试过OK了。这么写:
      $(function(){
             $("#button_1").click(function(){
                 $("#div_1").html("<button class='panel'>ki</button>");
                 $(".panel").bind("click",function(){alert("it works!");});
             });
         });
    当你触发button_1事件后,添加了元素同时也给这个元素绑定了click事件。