动态添加的锚点点击不调用jQuery Mobile中的功能

Question

我的页面从本地SQL获取字符串数据，并使用以下函数以li形式将其附加到data-role ='listview'（简化版）

function CreateListview{
   var temp ='<li><a href="#" class="anchor">String Here</a></li>';
   $("#<ul>-selector").append(temp).listview("refresh");
}

好吧，它工作正常，所以我为anchor（class ='。anchor'）绑定了一个click事件。

$(document).on('vclick', '.anchor', function(e){
  e.preventDefault();
  alert("ANCHOR CLICKED");
});

要么

$(document).on('vclick', '#ul-selector > a', function(e){
  e.preventDefault();
  alert("ANCHOR CLICKED");
});

要么

$(document).on('vclick', '#ul-selector > li a', function(e){
  e.preventDefault();
  alert("ANCHOR CLICKED");
});

甚至

$(document).on('vclick', 'a', function(e){
  e.preventDefault();
  alert("ANCHOR CLICKED");
});

但是没有任何工作，我通过在动态添加的li上使用下面的函数仔细检查了其他元素上的click事件是否起作用，有时它起作用，有时却不起作用。

我不知道为什么它会随机工作，

但是我检查了是否在其他动态添加的元素上触发了点击事件。

$(document).on('vclick', '#ul-selector > li', function(e){
  alert("<li> CLICKED");
});

当将click函数绑定到动态添加的锚点时 ，该函数将不会被触发。可能是一个错误吗？ 还是我写错代码？

您能给我一个将click事件绑定到动态添加的锚的工作示例吗？

Answer 1

对我来说似乎很好。

 function CreateListView() { var temp ='<li><a href="#" class="anchor">String Here</a></li>'; $("#selector").append(temp).listview("refresh"); } $(document).on('vclick', '.anchor', function(e){ e.preventDefault(); alert("ANCHOR CLICKED"); }); $("#createLi").on("vclick", function(){ CreateListView(); alert("test"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <div id="content"> <ul id="selector"> </ul> </div> <input id="createLi" type="button" value="create li"/> 

我想念什么吗？

Answer 2

像这样附加html后绑定事件

function CreateListview{
   var temp ='<li><a href="#" class="anchor">String Here</a></li>';
   $("#<ul>-selector").append(temp).listview("refresh");

$("#<ul>-selector > li").on("click",function(){
 alert("<li> CLICKED");
});

}

检查这个小提琴，您可以在此处应用相同的逻辑

Answer 3

您不是在听click事件，而是在click vclick （???）。

$("yourUl").on('click', '.anchor', function(e){
  e.preventDefault();
  alert("ANCHOR CLICKED");
});

Answer 4

我找到了解决方案。

问题 ：使用cordova，即使使用e.preventDefault（）;锚点上的“单击”也不会启动功能 相反，“ touchstart”可以正常工作。

解决方案 ：“单击”->“触摸启动”以在设备上工作

$(document).on('touchstart', '#anchor-selector', function(){
   alert("touch");
});