動態元素上的Click事件不起作用

Question

在framework7 ，如何在動態元素上添加click事件？

如果我先在視圖上添加元素，則click事件的工作原理如下：

<div class="test">Click Me</div>

$$('.test').on('click', function () {
    myApp.alert("Gotcha!");
}); 

但是，如果我有動態元素，尤其是動態添加到virtual-list元素，則無法使click事件起作用。 什么是正確的方法？

我什至嘗試了內聯函數，例如： <div class="test" onclick="myFunction();">Click Me</div> ，但這仍然行不通。

Answer 1

您可以使用：

// Live/delegated event handler
$$(document).on('click', 'a', function (e) { 
  console.log('link clicked'); 
});

對於您的情況：

$$(document).on('click', '.test', function(e){
  console.log('Some code...');
});

這是docs 。 滾動到events部分。

Answer 2

使用此來動態添加元素：

$$(document).on('click', '.test', function () {
    myApp.alert("Gotcha!");
}); 

Answer 3

所有答案都不錯。 但是，如果您將此類“測試”用於頁面的其他元素，則最終會引發一些額外的click事件（當您單擊同一類的任何其他元素時）。 因此，如果您想避免這種情況，則應將偵聽器添加到該特定元素。

如果要將類test的元素添加到id為testId的現有元素，則使用

 $('#testId').on('click', '.test', function(this){

   }

Answer 4

在動態添加新元素的函數中，必須為其分配事件處理程序。

假設您有一個類似這樣的功能

function addNewLines(){
  //add the new lines here
  // you have to run this again
  $$('.test').on('click', function () {
     myApp.alert("Gotcha!");
  }); 
}