javascript - 动态添加的 anchor 点击不会调用jquery mobile中的函数

Question

我的页面从本地 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");
}

嗯，它工作得很好，所以我为 anchor 绑定(bind)了一个点击事件(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");
});

当将点击函数绑定(bind)到动态添加的 anchor 时，该函数不会被触发。这可能是一个错误吗？或者我写的代码是错误的？

您能给我一个将点击事件绑定(bind)到动态添加的 anchor 的工作示例吗？

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

我错过了什么吗？