[英]dynamically added anchor click doesn't call function in jquery mobile
My page fetches string data from local SQL and appends it to data-role='listview' as li using function below(simplified version) 我的页面从本地SQL获取字符串数据,并使用以下函数以li形式将其附加到data-role ='listview'(简化版)
function CreateListview{
var temp ='<li><a href="#" class="anchor">String Here</a></li>';
$("#<ul>-selector").append(temp).listview("refresh");
}
well, it works fine so I binded a click event for the anchor(class='.anchor') 好吧,它工作正常,所以我为anchor(class ='。anchor')绑定了一个click事件。
$(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");
});
OR even 甚至
$(document).on('vclick', 'a', function(e){
e.preventDefault();
alert("ANCHOR CLICKED");
});
But nothing works I double-checked if click event on other elements works by using the function below on dynamically added li and it sometimes works and sometime doesn't. 但是没有任何工作,我通过在动态添加的li上使用下面的函数仔细检查了其他元素上的click事件是否起作用,有时它起作用,有时却不起作用。
I don't know why it works randomly, 我不知道为什么它会随机工作,
but I checked that click events are fired on some other dynamically added elements. 但是我检查了是否在其他动态添加的元素上触发了点击事件。
$(document).on('vclick', '#ul-selector > li', function(e){
alert("<li> CLICKED");
});
When it comes to binding click function to dynamically added anchors , the function won't be fired.. could it be a bug? 当将click函数绑定到动态添加的锚点时 ,该函数将不会被触发。可能是一个错误吗? or am I writing codes wrong?
还是我写错代码?
Can you give me a working example binding click event to dynamically added anchor? 您能给我一个将click事件绑定到动态添加的锚的工作示例吗?
It seems works fine for me. 对我来说似乎很好。
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"/>
Am I missing something? 我想念什么吗?
bind the event after you append the html like this 像这样附加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");
});
}
check this fiddle you can apply the same logic here 检查这个小提琴,您可以在此处应用相同的逻辑
You're not listening to the click
event but vclick
(???). 您不是在听
click
事件,而是在click
vclick
(???)。
$("yourUl").on('click', '.anchor', function(e){
e.preventDefault();
alert("ANCHOR CLICKED");
});
I found the solution. 我找到了解决方案。
Problem : with cordova, 'click' on anchor doesn't fire function even with e.preventDefault(); 问题 :使用cordova,即使使用e.preventDefault();锚点上的“单击”也不会启动功能 Rather, 'touchstart' works fine.
相反,“ touchstart”可以正常工作。
Solution : 'click' -> 'touchstart' to work on devices 解决方案 :“单击”->“触摸启动”以在设备上工作
$(document).on('touchstart', '#anchor-selector', function(){
alert("touch");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.