用jQuery将数据innerHTML后无法获取该数据的jQuery对象

本帖最后由 recher1114 于 2010-05-11 14:47:02 编辑

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title><script src="jquery-1.3.2.js"></script></head><body>
    <a href="#">点我</a>
    <span id="m"></span>
    </body>
    </html>
    <script> 
    $(window).load(function(){

    $("a").click(function(){ 
      var $data = '<select id="cid"><option value="0">--请选择--</option><option value="1">a</option></select>'; 
      $('#m').html($data);
      $("#cid").change(change);//动态生产的标签要追加事件
    });

     //下面这行无法获取id为cid的jquery对象
    /*$("#cid").change(function(){
    alert('#####');
    });*/
    function change(){
    alert('#####');
    }}); //下面这行无法获取id为cid的jquery对象  $("#cid").change( function () { alert('#####'); }); }); 
    </script>
      

  2.   

    $(window).load(function(){ 
        $("a").click( function () {
            var $data =  '<select id="cid"><option value="0">--请选择--</option><option value="1">a</option></select>';
                    $('#m').html($data);    });
        
        //下面这行无法获取id为cid的jquery对象
        $("#cid").live("change",function () {
            alert('#####');
        });});
      

  3.   


    $(window).load(function(){ 
        $("a").click( function () {
            var $data =  $('<select id="cid"><option value="0">--请选择--</option><option value="1">a</option></select>');
        $data.change(function () {
            alert('#####');
        });
        $('#m').html($data);    });
        });
      

  4.   


    <script>
    $(window).load(function(){ 
        $("a").click( function () {
            var $data =  '<select id="cid"><option value="0">--请选择--</option><option value="1">a</option></select>';
                    $('#m').html($data);    });
        
        //下面这行无法获取id为cid的jquery对象    /*      楼主，你的错误就出在这里。你的初衷应该是，点击 A（锚）的时候创建HTML。此时会动态在页面的 DOM 树里面插入代码。这个时候，id="cid" 的select节点才会生效。但是按照Javascript的执行顺序。你这里首先就抓取了 id="cid" 的 select 节点，而此时DOM树上面并没有挂接这个节点，就出现了空指针。可以参看  2、3楼的回复。代码这里就不写了。            */
        $("#cid").change( function () {
            alert('#####');
        });});
    </script>
      

  5.   


    回复一下 5 楼的疑惑。 
    var $data =  $('<select id="cid"><option value="0">--请选择--</option><option value="1">a</option></select>');
    根据 jQuery 的$()函数，会创建节点，并返回被创建节点的引用。
    所以，才有下面的 
    $data.change(function () {
        alert('#####');
    });
    这里的 $data 其实是 select 被包装之后的 jQuery 对象的引用
      

  6.   

    $("#pid").change( function () {
    var $pid = $("#pid option:selected").val();
    $.get("main.php", { action: "getGroup", type: "Group", pid: $pid },
    function(data){
    $('#m').html(data);
    $("#cid").change(showGrp);
    });
    });
    3楼的代码不好使，而且
    代码这两行还不能分开写
    $('#m').html(data);
    $("#cid").change(showGrp);
    必须挨着写否则也不管用，不明白
      

  7.   

    应该说是必须写在那个function里面
    那两行代码
      

  8.   


    <!-- 
    呵呵，楼主，这没有什么难以理解的。你不明白的原因，还是因为你对 HTML的 DOM 树的节点挂接和 js的
    function 函数执行的顺序存在疑点。
    那2行代码你写在了一起，为什么起作用？不是放在 function 里面就行的。不信，你可以颠倒一下他们的顺序，
    比如：
    $("#pid").change( function () {
            var $pid = $("#pid option:selected").val();
            $.get("main.php", { action: "getGroup", type: "Group", pid: $pid },
                function(data){                $("#cid").change(showGrp);//我这里颠倒了他们的执行顺便，运行一下，你可以试试看，一定会报错的，空指针。
                    $('#m').html(data);
                    //$("#cid").change(showGrp);//这里我注释掉了这行代码
                });
        });    如上，我修改了你的代码，就会报错。插入HTML代码的在上面执行，它的作用就是在 HTML 整个的 DOM 
    树上面挂接节点，这样下面的 $("#cid").change(showGrp); 才会捕捉到 id=cid 这个节点。如果两行代码颠倒一下，问题就出现了： 先去捕捉 id=cid 的节点（当然捕捉不到了，还没有挂接到HTML的DOM
    上面呢），再去往HTML的 DOM 树上面挂接 id=cid 的节点。可想而知，这里出错了。
     -->
      

  9.   

    你误解了 我是对他的代码很是无奈。能否实现功能我就不谈了明眼人一看就知道了
    他的代码颠三倒四，逻辑混乱的恐怖，所以即使他把功能实现了，我想他维护起来也是要命的
    我楼上已经给出解决方案的情况下我依然还提出一种解决方案并非是为了要分，而是他的那种做法对逻辑分离不是很好，虽然live有缺陷，但是相对来说我更推荐live绑定
      

  10.   


    你的代码我没有调整，只是把替换了你的change绑定为live("change",)
    当然了，你的之所以不成功，是因为jQuery的库没实现这个change绑定。我是后来修改了下，虽然效率在不同浏览器下有很大差距，但是却是可以实现了。
    这是我的失误，误导了 呵呵。