3

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

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

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

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

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

4

7 回答 7

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

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

查找文档以获取更多信息

于 2015-09-02T06:19:11.463 回答
5

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

尝试<div class="one">M</div>不使用属性进行定义<div">M</div>；将attributes第二个参数设置为jQuery( html, attributes ) , 利用.click()

jQuery( html, attributes )

html

类型：htmlString 定义单个独立 HTML 元素的字符串（例如 或 ）。

属性

类型：PlainObject 用于调用新创建元素的属性、事件和方法的对象。

重要提示：如果传递了第二个参数，则第一个参数中的 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>

于 2015-09-02T06:31:38.463 回答
2

是的。.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()，您可以直接调用该函数。

于 2015-09-02T06:22:11.583 回答
1

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

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

或者，如果有多个元素具有相同的类，并且这是最后一个元素，那么：

$(".one:last").trigger("click");
于 2015-09-02T06:20:29.287 回答
1

我发布了这个答案，因为我看不到在哪里放置这个触发方法。

如果您有.append(), .html()jquery 或.innerHTML, .appendChild()普通 js 之类的任何实现，那么在执行它之后，或者我会说，每当您将元素附加到 DOM 中时，就在它之后您可以使用任何要触发的事件，但必须绑定某些事件它。

因此，元素必须在 DOM 中才能触发/触发任何事件。

举个例子： 

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>

于 2015-09-02T06:32:25.727 回答
1

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

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

CSS类

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

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

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

试试FIDDLE，如果有的话，分享你的意见。

希望这可以帮助 ............

于 2015-09-02T07:08:48.860 回答
1

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

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

在这里检查

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

于 2015-09-02T08:55:34.213 回答