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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16107267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:27:26  来源:igfitidea点击:

Getting access to a jquery element that was just appended to the DOM

javascriptjqueryappend

提问by Greg Alexander

I am simply appending an element that is on the DOM like:

我只是在 DOM 上附加一个元素,例如:

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

Right after I append it I need access to the element I just made in order to bind an click function to it, I tried:

在我追加它之后,我需要访问我刚刚制作的元素以便将点击功能绑定到它,我尝试了:

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

But the above didn't work. I could uniquely id the element but that seems like a bit to much work when perhaps there is a way I can get the element right after I append it.

但是上面的方法没有用。我可以唯一地标识元素,但这似乎有点太多工作,因为也许有一种方法可以在添加元素后立即获取元素。

回答by Kenneth

You can do this:

你可以这样做:

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

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

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

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

The append function accepts two types of arguments: a string or a jQuery element. In case a string is passed in, it will create a jQuery element internally and append it to the parent element.

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

In this case, you want access to the jQuery element yourself, so you can attach the event handler. So instead of passing in the string and let jQuery create an element, you have to create the element first and then pass it to the append-function.

在这种情况下,您希望自己访问 jQuery 元素,以便可以附加事件处理程序。因此,与其传入字符串并让 jQuery 创建一个元素,不如先创建该元素,然后将其传递给 append 函数。

After you've done that, you still have access to the jQuery element to be able to attach the handler.

完成此操作后,您仍然可以访问 jQuery 元素以附加处理程序。

回答by RafH

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

http://jsfiddle.net/33jX4/

http://jsfiddle.net/33jX4/

回答by codebox

Why not save a reference to the new element before you append it:

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

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

回答by anpsmn

The last element would be the new element

最后一个元素将是新元素

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

回答by SachinGutte

You can attach event to element when you create it --

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

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

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


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

回答by Blazemonger

Just attach the click handler to the anchor BEFORE you append it.

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

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

回答by Suresh Atta

Add identity to that elementthen use it as follows

添加身份,element然后按如下方式使用它

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


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