jquery为动态元素添加事件

本帖最后由 redeemer_hou 于 2013-07-16 20:04:21 编辑

解决方案 »

  1.   

    一个是gzlx，第二个是gzfl
    怎么相同了
      

  2.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
             
            function add_row(obj){
                var $self = $(obj);
                var $th = $self.parent();
                var $tdbox = $th.next();
                var $row = $tdbox.children(".row:eq(0)");
                $row.clone().appendTo($tdbox);
            }
             
            function del_row(obj){
                var $self = $(obj);
                var $th = $self.parent();
                $th.remove();
            }
                 
            
             
    function sel(e){
     
    var $tep=$(e).parent().parent().children("label:eq(1)").find("select[name='gzfl']");
    $tep.empty();
     
          if(e.value=='test'){
                   $("<option value='1'>1111</option><option value='2'> 2222</option>").appendTo($tep);  
                }else if(e.value=='test1'){
                   $("<option value='3'>3333</option><option value='4'> 4444</option>").appendTo($tep) 
                }else if(e.value=='test2'){
                  $("<option value='5'>5555</option><option value='6'> 6666</option>").appendTo($tep)
                }

    }
    </script>
    </head>
     
     
    <body>
    <table class="ettb" width="100%" border="0">
                <tr>
                    <th valign="top"><input class="btn" type="button" onclick="add_row(this);" value="加一行" /></th>
                    <td colspan="3">
                        <div class="row mb5">
                            <label class="mr10">select1：
                                <select name="gzlx" id="gzlx" onchange="sel(this)">
                                    <option value="test">test</option>
                                    <option value="test1">test1</option>
                                    <option value="test2">test2</option>
                                </select>
                            </label>
                            <label class="mr10">select2：
                                <select name="gzfl" id="gzfl">
                                    <option value="bu">    bu   </option>
                                    <option value="nu">nu</option>
                                </select>
                            </label>
                                <input class="btn" type="button" onclick="del_row(this);" value="删除" />
                                <br /><br />
                        </div>
                    </td>
                </tr>
                </table>
    </body>
    </html>
      

  3.   

    绑定事件的方式改成以下方式$(function(){
             $("table").delegate("select[name='gzlx']", "change", function(evt){
             var $gzfl = $(this).parents(".row:first").find("#gzfl");
             $gzfl.empty();
             var selected=$(this).val();
             if(selected=='test'){
                    $gzfl.append("<option value='1'> 1  </option><option value='2'>2</option>");  
                }else if(selected=='test1'){
                    $gzfl.append("<option value='3'>3</option><option value='4'>4</option>");   
                }else if(selected=='test2'){
                    $gzfl.append("<option value='5'>5</option><option value='6'>6</option>");   
                }
             });
            });