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

将此用于dinamically添加的元素：

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

Answer 3

所有答案都很好。但是如果你正在使用这个课程，那么考试＆＃39;对于页面的其他元素，您最终会触发一些额外的单击事件（当您单击同一个类的任何其他元素时）。因此，如果您想要阻止它，您应该将侦听器添加到该特定元素。

如果您要将类test的元素添加到标识为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!");
  }); 
}

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

4 个答案: