JQuery $("...").appendTo("...") 获取不到新创建的元素

Question

本帖最后由 joekingwang 于 2011-03-03 19:58:11 编辑

Answer 1

 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<table id="table-SQL" cellspacing="0" cellpadding="2" border="1">
    <tr id="tableSQL_0"><td colspan="3">表1</td></tr>    <tr id="tableSQL_1">
    <td>aaaaaaaaaaa</td>
    <td>bbbbbbbbbbb</td>
    <td><a href="javascript:" id="SQLROW_add">添加</a></td>
    </tr>
    <tr>
    <td><span id="spanSQL_1">aaaaaaaaaaa</span></td>
    <td><span id="spanSQL2_1">bbbbbbbbbb</span></td>
    <td><a href="javascript:void(0);" class="SQLROW_del">获取当前元素</a></td>
    </tr>    <a href="javascript:void(0);" id="aaa">插入新行后，能获取正确的行数</a>
</table>
<script type="text/javascript">
$(function(){
    //行删除
    $(".SQLROW_del").live('click',function() { 
        alert("eee");
        alert($(this).html());
        //$(this).parent().remove(); 
    });     //行添加
    $("#SQLROW_add").click(function(){
        $("<tr id=\"tableSQL_6\"><td><span id=\"spanSQL_6\">new1</span></td><td><span id=\"spanSQL2_6\">new2</span></td><td><a href=\"javascript:void(0);\" class=\"SQLROW_del\">获取当前元素</a></td></tr>").appendTo("#table-SQL");
    });    $("#aaa").click(function(){
        alert($("#table-SQL").find("tr").length);
    });
});
</script>

Answer 2

解决了，呵呵，问题挺白的，呵呵，分享个大家。大家都知道,用jquery的appendTo动态增加的东西,添加的事件只能跟在appendTo后写.
比如:
$("<div><img src=''></div>").appendTo("body");
如果我们想给这动态增加的东西 添加一个click事件.
我们可以这样写:
$("<div><img src=''></div>").appendTo("body").click(function(){
   // do something... ;
});如果我现在想对div,里面的img添加事件, 而不是整个div.那我们怎么办呢?也许你已经想到方法了,我说下我的方法吧.  
$("<div><img src=''></div>").appendTo("body").find("img").click(function(){
   // do something... ;
});
这样click事件 就只对img有效了.
注意:
find()方法 要注意配合跟 end()使用...

Answer 3

谢谢hookee老大，呵呵。
附上live用法：
live(type, [data], fn)
手册API的介绍 jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 如下用 live给class=clickme的元素绑定一个click事件：
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
当我们在某次事件又动态地添加了一个class=clickme的元素时，如
$('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素，他依然能够触发事件处理函数。