如何触发点击动态创建的元素

Question

我知道我们可以将事件绑定到动态创建的元素，如下所示

$('some').on('click','class/id of dynamic ele',function(){});

但是如何在动态创建的元素上触发点击事件，就像我在 dom

中创建的新元素一样

<div class="one">M</div>

现在我怎么 $( ".one" ).trigger( "click" ); ？

Answer 1

$(document).on('click', '.one', function() {

使用这个来点击动态创建的元素

查找 DOCUMENTATION 了解更多信息

Answer 2

将该元素存储在一个变量中，使用它在正文中动态附加，然后触发点击它：

var div = "<div class='one'>M</div>";
$("body").append($(div));
//Your code//
$(div).trigger("click");

或者如果有多个元素具有相同的 class 并且这是最后一个元素则：

$(".one:last").trigger("click");

Answer 3

是的。 .trigger() 应该做：

片段：

var myDIV = $('<div id="myDIV">&nbsp;</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>

不过话又说回来，如果这是你想在 document 准备好或 window 加载时做的事情，那么你可能不需要 .trigger() ，可以直接调用函数。

Answer 4

but how to trigger click event on dynamically created element like i have created new element in dom

尝试定义没有属性 <div">M</div> 的 <div class="one">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.

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.

// 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>

Answer 5

我发布了这个答案，因为在所有答案中我都看不到将这个触发方法放在哪里。

如果你有任何像 jquery 的 .append(), .html() 或普通 js 的 .innerHTML, .appendChild() 这样的实现，那么在执行它之后，或者我会说每当你将你的元素附加到 DOM，在它之后你可以使用任何事件来触发但是一些事件必须绑定在它上面。

因此，元素必须在 DOM 到 fire/trigger 任何事件中。

举个例子：

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>

Answer 6

由于没有 FIDDLE 提供，我假设了以下标记

<a class="some">Click To Add</a>
<br/>
<div class="container">
</div>

css class

.one
{
    background-color: Grey;
}
.some
{
     background-color: Red;
}

在控件添加到 DIV（带容器 class）后分配点击事件

$(document).ready(function(){
    $('.some').click(function(){
        $('.container').append("<div class='one'>M</div><br/>");
        $('.container div').off('click').on('click',function(){
                alert("Clicked");
        });
    });
});

尝试 FIDDLE，并分享您的意见。

希望对您有所帮助......

Answer 7

你试过 delegate 吗？如果不是，您可以像这样尝试动态添加的内容。

$('body').delegate("div.one", "click", function(e){
   // do you other works here
});

检查这个here

希望您的问题得到解决。 :)

如何触发点击动态创建的元素

How to trigger click on dynamically created element

javascript

jquery

event-binding