jquery 移动设备中动态添加的锚点击不调用函数

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

好吧，它工作正常所以我为锚点绑定了一个点击事件(class='.anchor')

$(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 上使用下面的函数仔细检查了其他元素上的单击事件是否有效，它有时有效，有时无效。

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

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

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

将点击函数绑定到动态添加的anchors时，该函数不会被触发.. 这可能是一个错误吗？还是我写错了代码？

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

Answer 1

像这样

添加 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 2

您没有收听 click 事件，而是 vclick(???).

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

Answer 3

我觉得还行。

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 4

我找到了解决方案。

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

解决方案：'click' -> 'touchstart' 在设备上工作

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

jquery 移动设备中动态添加的锚点击不调用函数

dynamically added anchor click doesn't call function in jquery mobile

javascript

anchor

jquery

click

jquery-mobile