动态元素上的单击事件不起作用

Question

在framework7中，如何在动态元素上添加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

在动态添加新元素的函数中，您必须为它们分配一个事件处理程序。

假设你有一个类似这样的函数

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

Answer 3

将此用于动态添加的元素：

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

Answer 4

所有答案都很好。但是，如果您将此 class 'test' 用于页面的其他元素，您将最终触发一些额外的点击事件（当您点击相同 class 的任何其他元素时）。所以如果你想阻止这种情况，你应该为那个特定的元素添加监听器。

如果您要将 class test 的元素添加到 ID testId 的现有元素，则使用

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

   }

动态元素上的单击事件不起作用

Click event on dynamic elements not working

javascript

html-framework-7