方法“after”不适用于尚未在 DOM 中的元素

The method 'after' does not work with elements not yet in DOM

本文关键字：DOM 元素 after 不适用 适用于 方法      更新时间：2023-09-26

我想一个接一个地将两个HTML元素添加到Dom元素中。但是这个调用不适用于jQuery。

$("<button>click me</button>").after("<span> or be happy </span>")
                              .appendTo("#someId");

我无法将两个元素组合在一个字符串中的原因是我想向第一个元素添加一个事件处理程序。所以我真正想做的是：

$("<button>click me</button>").after("<span> or be happy </span>")
                              .on("click", function() {
                                  // do something
                              });

现在，我的解决方法是为按钮分配一个 id，并在单独的 jQuery 调用中添加"span"。这样。。。

$('<button id="uid">click me</button>').on("click", function() {
                                            // do something
                                           });
$('#uid').after('<span> or be happy</span>');

有更好的方法吗？

只需在.append()之后执行.after()即可。

http://jsfiddle.net/Kr9m4/

$("<button>click me</button>").on("click", function() {
    // do something
})
    .appendTo("#someId")
    .after("<span> or be happy </span>");

或者像这样：

http://jsfiddle.net/Kr9m4/1/

$("<button>", { text:"click me",
               click: function() {
                  // do something
               }})
    .appendTo("#someId")
    .after("<span> or be happy </span>");

那么你应该这样做：

var _button = $('<button>')
                  .text('click me')
                  .on('click', function () { }),
    _span = $('<span>').text(' or be happy');
// not sure about the order, so just switch these two if ever
$('#foo').after(_button).after(_span);

编辑

根据文档，即使节点尚未断开连接，您实际上也可以插入 DOM 节点(并进行操作(。这假设jQuery 1.4+。

因此，如果您符合该法案，您应该能够在一个语句中完成所有这些操作：

$('<button>').text('click me')
             .on('click', function () {
                 // ...
             })
             .after('<span>')
                 .text(' or be happy')
                 .appendTo('#uid')
                 ;
相关文章：