javascript - 动态添加的 anchor 点击不调用jQuery Mobile中的功能

我的页面从本地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事件绑定到动态添加的锚的工作示例吗？

最佳答案

对我来说似乎很好。

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"/>

我想念什么吗？

关于javascript - 动态添加的 anchor 点击不调用jQuery Mobile中的功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28893110/