Javascript 单击“动态元素不工作”上的事件

在

framework7

中，如何添加

单击
动态元素上的事件

如果我首先在视图中添加我的元素，单击事件将正常工作，如下所示：

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

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

点击我
$$（'.test'）。在（'click'，函数（）{
myApp.alert（“抓到你了！”）；
}); 

但是，如果我有动态元素，特别是动态添加到
虚拟列表中的元素，我无法使
单击
事件工作。正确的方法是什么

我甚至尝试了内联函数，例如：
单击我
，但这仍然不起作用。
您可以使用：

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

对于您的情况：

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

这是。滚动至事件部分。
您可以使用：

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

对于您的情况：

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

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

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

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

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

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

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

将此选项用于以数字方式添加的元素：

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

将此选项用于以数字方式添加的元素：

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

所有的答案都很好。但是，如果您对页面的其他元素使用这个类“test”，那么最终会触发一些额外的click事件（当您单击同一类的任何其他元素时）。所以，如果您想防止这种情况发生，您应该将侦听器添加到该特定元素中

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

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

   }

所有的答案都很好。但是，如果您对页面的其他元素使用这个类“test”，那么最终会触发一些额外的click事件（当您单击同一类的任何其他元素时）。所以，如果您想防止这种情况发生，您应该将侦听器添加到该特定元素中

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

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

   }

听起来您在创建元素之前调用了单击事件，因此单击事件不会附加到元素。听起来您在创建元素之前调用了单击事件，因此单击事件不会附加到元素。谢谢，是的，我可以用这种方式触发单击事件，但我需要传递一些值基于我单击的元素。@JunM通过访问
this
内部回调，您已经拥有此元素。谢谢，是的，我可以用这种方式触发单击事件，但我需要根据我单击的元素传递一些值。@JunM通过访问
this
内部回调，您已经拥有此元素。