如果使用append（）插入新的DOM节点，是否可以将链上下文移动到新元素？从最新追加（）调用中获取元素

此示例代码说明了主题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
         "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script type="text/javascript"><!-- 
$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }); 
}); 
//--></script> 
</head> 
<body> 

</body> 
</html>

此代码attachs一个onclick处理程序的<div>，但我想它在新的<span>。

编辑：澄清

我想我在想直接函数，如add()或andSelf()不打破链流了这么多<:-)

编辑：解汇总

对于记录：似乎没有原生findAppended()功能。这些都是一些备选方案：

阿尔特制作流程：

$("<span>Click me</span>") 
    .appendTo("body") 
    .wrap("<div></div>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    });

存储在一个变量的新元素：

var span = $("<span>Click me</span>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }); 
$("<div></div>") 
    .appendTo("body") 
    .append(span);

开始一个新的子链：

$("<div></div>") 
    .appendTo("body") 
    .append(
     $("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }) 
    );

找到新的元素创建后：

$("<div></div>") 
    .appendTo("body") 
    .append("<span>Click me</span>") 
    .find("span:last") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }) 
    .end(); // Not necessary here, used to illustrate how to continue the chain

注：代码没有测试。

来源

2010-07-07 Álvaro González

哈哈，看你做了什么 - 你已经暴露了5种万亿方式做同样的事情在jQuery的，哈哈哈哈 – 2010-07-07 08:15:43

@丹赫伯登：你是对的:) – 2010-07-07 08:23:55

做了一些编辑我的答案re：你的说明 – 2010-07-07 18:41:48

可能会更好地打破这一点，但你需要从元素开始或找到它。所以，你既可以：

$("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .find('span') 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     });

或

$('<span>Click me</span>') 
    .appendTo("body") 
    .wrap('<div />') 
    .click(function(){ 
       alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
      });

find和wrap

编辑：关于OP编辑

记住.add()（http://api.jquery.com/add/）已经存在，做什么名字暗示。此外，像

var $span = $('<span>click me</span>').click( 
       function() { 
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
       }); 
$('<div></div>').append($span).appendTo('body');

将最终使你的代码更易于管理和易读

的jQuery已经有了分类的方法来过滤和遍历DOM。在您使用DOM的情况下，您可以轻松使用.find('span')来获取元素 - 或.children('span') - 在这里使用好的选择器和整体网站架构非常重要。

此外，.end()功能是非常糟糕的屁股：

$('ul').append('<li>test</li><li>test2</li>') // add two li elements 
    .children().eq(0).css('background-color', '#ff0000') // change the background of the first child 
    .end().css('margin-left', '20px'); //revert to the original data-set (the ul) and change its margin

来源

2010-07-07 08:13:25

add（）改变了匹配元素的集合，而不是DOM，所以我仍然需要使用任何其他方法（改变创建流程，变量中的存储元素，开始新的子链或查找元素创建后）。无论如何，我接受这个答案，因为它似乎没有本地功能存在，你提供了一个很好的监督的替代品。 – 2010-07-08 06:56:07

这是可以做到，通过重新设计对象创建流了一点。因此，创建span，配置它，处理点击，然后将其附加到主体。这是可能的，这要归功于jquery的流畅接口。

$(function(){ 
$("<div></div>") 
    .appendTo("body") 
    .append(
    $("<span/>") 
     .text("Click me") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     })); 
});

来源

2010-07-07 08:13:48

$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append($("<span>Click me</span>").click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }));   
});

来源

2010-07-07 08:14:11 jAndy

从最新追加（）调用中获取元素

编辑：澄清

编辑：解汇总

回答

相关问题