Question

我只是在DOM上附加一个元素，如：

$("#div_element").append('<a href="#">test</a>');

在我追加它之后，我需要访问我刚刚创建的元素以便将click函数绑定到它，我试过了：

$("#div_element").append('<a href="#">test</a>').click(function(){alert("test")});

但上述情况并没有奏效。我可以唯一地识别元素，但这似乎有点工作，或许有一种方法可以在我追加它后立即获得元素。

Answer 1

你可以这样做：

var el = $('<a href="#">test</a>');

$("#div_element").append(el);

el.click(function(){alert("test")});

// or preferrably:
el.on('click', function(){alert("test")});

append函数接受两种类型的参数：字符串或jQuery元素。如果传入一个字符串，它将在内部创建一个jQuery元素并将其附加到父元素。

在这种情况下，您希望自己访问jQuery元素，以便附加事件处理程序。因此，不是传入字符串并让jQuery创建元素，而是必须先创建元素，然后将其传递给append-function。

完成后，您仍然可以访问jQuery元素以便能够附加处理程序。

Answer 2

var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

Answer 3

为什么不在追加新元素之前保存对它的引用：

var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function(){alert("test")});

Answer 4

为element添加标识，然后按如下方式使用

$("#div_element").append('<a id="tester" href="#">test</a>');


$('#tester').on('click', function(event) {
console.log('tester clicked');
});

Answer 5

最后一个元素是新元素

$('a:last','#div_element').on('click',function(){
    // do something
});

Answer 6

您可以在创建元素时将事件附加到元素 -

var ele =$("<a href='#'>Link</a>");

ele.on("click",function(){
    alert("clicked");
});


$("#div_element").append(ele);

Answer 7

在附加它之前，只需将点击处理程序附加到锚点。

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));

访问刚刚附加到DOM的jquery元素

7 个答案: