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

【问题标题】：dynamically added anchor click doesn't call function in jquery mobilejquery mobile中动态添加的锚点点击不会调用函数
【发布时间】：2015-03-06 19:02:38
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery jquery-mobile click anchor

【解决方案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"/>

我错过了什么吗？

【讨论】：

这在科尔多瓦也有效..？我发现只有锚不调用点击功能..点击其他一切正常

【解决方案2】：

您听的不是click 事件，而是vclick(???)。

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

【讨论】：

它是为 jquery mobile 设计的，我猜？即使我使用“点击”它仍然不起作用
@Joon.P，好的。我刚刚检查过了。但它说最好使用click 而不是vclick，因为webkit 浏览器存在延迟。 $(document).on('click', '.anchor', function(e){ .... });

【解决方案3】：

像这样附加 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你可以在这里应用相同的逻辑

【讨论】：

hm.. 仅在第一次单击时有效，然后我必须刷新页面以使其再次工作，但仍然仅在第一次单击时有效。它表明锚点点击有效，但不是从第二次点击开始。

【解决方案4】：

我找到了解决办法。

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

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

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

【讨论】：