Javascript 如何触发点击动态创建的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32345846/
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
How to trigger click on dynamically created element
提问by Richerd fuld
I know we can bind event to dynamically created elements like below
我知道我们可以将事件绑定到动态创建的元素，如下所示
$('some').on('click','class/id of dynamic ele',function(){});
but how to trigger click event on dynamically created element like i have created new element in dom
但是如何在动态创建的元素上触发点击事件，就像我在 dom 中创建了新元素一样
<div class="one">M</div>
now how can i $( ".one" ).trigger( "click" );?
现在我该怎么$( ".one" ).trigger( "click" );办？
回答by guest271314
but how to trigger click event on dynamically created element like i have created new element in dom
但是如何在动态创建的元素上触发点击事件，就像我在 dom 中创建了新元素一样
Try defining <div class="one">M</div>without attributes <div">M</div>; setting attributesat second argument to jQuery( html, attributes ), utilizing .click()
尝试在<div class="one">M</div>没有属性的情况下定义<div">M</div>；将attributes第二个参数设置为jQuery( html, attributes )，利用.click()
jQuery( html, attributes )html
Type: htmlString A string defining a single, standalone, HTML element (e.g. or ).
attributes
Type: PlainObject An object of attributes, events, and methods to call on the newly-created element.
jQuery( html, attributes )html
类型：htmlString 定义单个、独立的 HTML 元素（例如 或 ）的字符串。
属性
类型：PlainObject 在新创建的元素上调用的属性、事件和方法的对象。
Important: If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes.As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.
重要提示：如果传递了第二个参数，则第一个参数中的 HTML 字符串必须表示一个没有属性的简单元素。从 jQuery 1.4 开始，可以传入任何事件类型，并且可以调用以下 jQuery 方法：val、css、html、text、data、width、height 或 offset。
// create dynamic element
$( "<div></div>", {
"class": "one",
"text": "abc",
"on": {
// attach `click` event to dynamically created element
"click": function( event ) {
// Do something
console.log(event.target, this.textContent)
}
}
}).appendTo( "body" )
// trigger `click` event on dynamically created element
.click()<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>回答by Brownman Revival
$(document).on('click', '.one', function() {
use this one to put click on dynamically created element
使用这个来点击动态创建的元素
find the DOCUMENTATIONfor more info
查找文档以获取更多信息
回答by K K
Store that element in a variable, use the same to append dynamically in the body and then trigger click on it:
将该元素存储在一个变量中，使用相同的方法在正文中动态附加，然后触发点击它：
var div = "<div class='one'>M</div>";
$("body").append($(div));
//Your code//
$(div).trigger("click");
Or if there are multiple elements with same class and this is the last element then:
或者，如果有多个具有相同类的元素并且这是最后一个元素，则：
$(".one:last").trigger("click");
回答by Tahir Ahmed
Yup. .trigger()should do:
是的。.trigger()应该做：
Snippet:
片段：
var myDIV = $('<div id="myDIV"> </div>');
$(document.body).append(myDIV);
$(document).on('click', '#myDIV', onClick);
function onClick() {
alert('hello');
}
myDIV.trigger('click');div {
background-color: #cc0;
width: 100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>But then again, if this is something you want to do when the documentis ready or when the windowhas loaded, then you probably don't need to .trigger(), you can call the function directly.
但话又说回来，如果这是您在document准备好或window已加载时想要做的事情，那么您可能不需要.trigger()，您可以直接调用该函数。
回答by Jai
i am posting this answer as in all the answers i can't see where to put this trigger method.
我正在发布这个答案，因为在所有答案中我都看不到将此触发方法放在哪里。
If you have any implementations like .append(), .html()of jquery or .innerHTML, .appendChild()of plain js then after execution of it, or i would say whenever you append your element in the DOM, right after it you can use any event to be triggered but some event has to be bound on it.
如果您有任何类似.append(), .html()jquery 或.innerHTML, .appendChild()普通 js 的实现，那么在执行它之后，或者我会说每当您将元素附加到 DOM 中时，在它之后您可以使用任何要触发的事件，但必须绑定某些事件它。
So, element has to be in the DOM to fire/trigger any event.
因此，元素必须在 DOM 中才能触发/触发任何事件。
Take this example:
拿这个例子：
var div = $('<div id="aaa">aaa</div>');
$(document.body).append(div).on('click', '#aaa', divClik);
function divClik(e) {
alert(this.id+' clicked.');
}
div.trigger('click');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>回答by Mayank
As no FIDDLE provided, I have assumed the following markup
由于没有提供 FIDDLE，我假设了以下标记
<a class="some">Click To Add</a>
<br/>
<div class="container">
</div>
css class
css类
.one
{
background-color: Grey;
}
.some
{
background-color: Red;
}
Assigning click event after the control added to the DIV(with container class)
控件添加到DIV后分配点击事件（带容器类）
$(document).ready(function(){
$('.some').click(function(){
$('.container').append("<div class='one'>M</div><br/>");
$('.container div').off('click').on('click',function(){
alert("Clicked");
});
});
});
Try The FIDDLE, and share your inputs if any.
尝试 The FIDDLE，并分享您的输入（如果有）。
Hope this helps ............
希望这可以帮助 ............
