如何觸發點擊動態創建的元素

Question

我知道我們可以綁定事件動態創建的元素，如下面

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

但如何觸發單擊動態創建的元素上的事件就像我已經在DOM

創建新元素

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

現在，我怎麼$(".one").trigger("click");？

Answer 1

但如何觸發動態創建的元素上單擊事件像我 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方法可以被稱爲：纈氨酸，CSS，HTML，文本，數據， 寬度，高度，或偏移。

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

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

用這個把點擊動態創建的元素

找到DOCUMENTATION更多信息

Answer 3

存放在一個變量元素，使用相同的在體內，然後觸發動態追加點擊它：

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

或者有與同一類中的多個元素，這是最後一個元素，那麼：

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

Answer 4

是啊。 .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 5

我張貼這個答案在所有的答案我看不到的地方把這個觸發方式。

如果你有像jQuery的.append(), .html()或純JS的.innerHTML, .appendChild()任何實現那麼它執行後，否則我就當你在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>

Answer 6

由於沒有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，並分享您的輸入（如有）。

希望這有助於............

Answer 7

你有沒有試着用代表？如果不是的話，你可以嘗試像這樣動態添加內容。

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

檢查這個here

希望你的問題就解決了。 :)