Question

我的页面从本地SQL中获取字符串数据，并将其附加到data-role =＆＃39; listview＆＃39;作为li使用下面的功能（简化版）

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

嗯，它工作正常，所以我为锚定了一个点击事件（class =＆＃39; .anchor＆＃39;）

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

OR

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

OR

$(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");
});

在绑定点击功能以动态添加锚点时，该功能不会被解雇.. 它可能是一个错误吗？还是我写错了代码？

你能给我一个工作示例绑定点击事件来动态添加锚吗？

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");
});

}

选中此fiddle，您可以在此处应用相同的逻辑

Answer 3

您没有收听click事件，而是vclick（???）。

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

Answer 4

我找到了解决方案。

问题：使用cordova，即使使用e.preventDefault（），锚点上的“click”也不会触发功能;相反，'touchstart'工作正常。

解决方案：'click' - ＆gt; 'touchstart'在设备上工作

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

动态添加锚点击不会在jquery mobile中调用函数

4 个答案: