Question

我正在尝试将一些包含数据和点击处理程序的链接附加到包含div。

jQuery 1.4.3

在FireFox 5.0 / Chrome 13.0.782中失败，但在IE9中工作

我首先将元素创建为jQuery对象，然后添加数据并单击处理程序。然后我使用.append（）将它追加到容器中：

var $selector = $('<a href="#" class="x">Test</a>');
$selector.data('testdata', "Test");
$selector.click(function(event) {
   alert('Clicked: ' + $(this).data('testdata'));
   return false;
});

$('#container').append($selector);

我看到添加了链接，但是当我点击它时，点击处理程序不会触发。

我想也许我需要首先进行追加然后添加数据+点击，但这也不起作用：

var $selector = $('<a href="#" class="x">Test</a>');
$('#container').append($selector);

$selector.data('testdata', "Test");
$selector.click(function(event) {
   alert('Clicked: ' + $(this).data('testdata'));
   return false;
});

追加不保留数据和处理程序吗？似乎当我.append（$ selector）时，$ selector和新添加的DOM对象不是同一个。

Answer 1

您使用的是哪种浏览器？另外，哪个版本的JQuery？这适用于firefox，即jQuery 1.6版本的chrome。 Here是我正在使用的测试小提琴。

Answer 2

我不认为追加是你问题的原因。这是因为您传入$（）来创建元素的html不是一个简单的标记。

根据jQuery（html）的文档：

如果HTML比没有属性的单个标签更复杂，就像在上面的例子中那样，元素的实际创建由浏览器的innerHTML机制处理。在大多数情况下，jQuery会创建一个新元素，并将元素的innerHTML属性设置为传入的HTML片段。当参数具有单个标记（例如$('<img />')或$('<a></a>')）时，jQuery会创建使用本机JavaScript createElement（）函数的元素。

此引用来自此页面：http://api.jquery.com/jQuery/#jQuery2

这意味着您可能会获得与您想要的元素不同的元素，因为它取决于浏览器的innerHTML属性。如果传入一个简单的标记'<a></a>'并将其他属性作为第二个参数映射到$（html，props），您可能会发现它更容易。

要在$（html，props）调用中使用简单标记来实现此功能，您可以执行以下操作：

var $selector = $('<a></a>', 
    { 
    "class" : "x",
    "href" : "#",
    text : "Test",
    click: function() {
           alert('Clicked: ' + $(this).data('testdata'));
            return false;
        }
    });

$('#container').append($selector);

$selector.data('testdata', "Test data");

Answer 3

对于我的页面，使用jQuery 1.4.3和1.4.4存在问题。但是，如果我升级到1.6.1，问题就会消失，代码会按预期工作。在特定的点，我担心升级到1.6.1。

我的另一个选择是附加元素，然后在添加数据和处理程序之前使用jquery重新查询它。该代码确实有效，但显然不理想。

Answer 4

我遇到了同样的问题，请尝试使用.appendTo()代替.append()。

它对我有用。

jquery append（）不保留数据或单击处理程序

4 个答案: