0

我想将两个 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>');

它有更好的方法吗？

4

2 回答 2

1

只需.after()在.append().

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>");
于 2012-05-10T15:48:20.743 回答
0

你应该这样做：

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')
                 ;
于 2012-05-10T14:56:13.873 回答