html – jQuery Mobile点击动态列表项上的事件

html – jQuery Mobile点击动态列表项上的事件,第1张

概述我无法从列表项中获取点击事件.在此页面中: http://bec-systems.com/list-click.html 列表中的第一个条目触发单击事件.但是,如果通过按“刷新更新列表”按钮动态添加3个事件,则接下来的3个列表条目不会生成单击事件. 感谢关于如何使这项工作或通常改进代码的任何建议. 谢谢, 悬崖 代码也列在下面: <!DOCTYPE html> <html> <head 我无法从列表项中获取点击事件.在此页面中:

http://bec-systems.com/list-click.html

列表中的第一个条目触发单击事件.但是,如果通过按“刷新更新列表”按钮动态添加3个事件,则接下来的3个列表条目不会生成单击事件.

感谢关于如何使这项工作或通常改进代码的任何建议.

谢谢,
悬崖

代码也列在下面:

<!DOCTYPE HTML> <HTML>     <head>     <Title>Status</Title>     <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.CSS" />    <script src="http://code.jquery.com/jquery-1.7.1.min.Js"></script>    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.Js"></script>  <script type="text/JavaScript">$(document).ready(function() {  $("#refreshUpdatebutton").on("click",function(event,ui) {    console.log("refreshUpdatebutton")    versions = ["0.3","0.4","0.5"]    for (var i=0; i < versions.length; i += 1) {      $("#updateVersionsList").append('<li><a ID="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>');      if ($("#updateVersionsList").hasClass('ui-ListvIEw')) {        $("#updateVersionsList").ListvIEw("refresh");      } else {        $("#updateVersionsList").trigger('create');      }    }  })  $('[ID^=updateVersionItem]').on("click",ui) {    console.log("updateVersion,selected = " + $(this).attr('ID'));  })});  </script></head> <body> <!-- Software update page --><div data-role="page" ID="software-update-page">    <div data-role="header">        <h1>Software Update</h1>    </div><!-- /header -->    <div data-role="content">       <h1>Select Software version:</h1>    <ul data-role="ListvIEw" ID="updateVersionsList">      <li><a ID="updateVersionItem-0">0.0</a></li>      <li><a ID="updateVersionItem-1">0.1</a></li>      <li><a ID="updateVersionItem-2">0.2</a></li>    </ul>    <br>    <a data-role="button"  ID="refreshUpdatebutton">Refresh Update List</a>    </div><!-- /content --></div></body></HTML>
解决方法 使用这种形式的.on()(以下评论).

$(document).on("click",'[ID^=updateVersionItem]',selected = " + $(this).attr('ID'));  })

示例:http://jsfiddle.net/saluce/YaAEJ/

否则,无论何时动态添加新元素,都需要将click事件附加到这些项目.

假设以下代码:

function doThisOnClick(event,selected = " + $(this).attr('ID'));}$('[ID^=updateVersionItem]').on("click",doThisOnClick);

您可以取消绑定处理程序并重新附加到所有匹配项:

$('[ID^=updateVersionItem]').off("click",doThisOnClick);$('[ID^=updateVersionItem]').on("click",doThisOnClick);

或者只需在添加后将其动态添加到新项目中:

$("#updateVersionsList").append('<li><a ID="updateVersionItem-' + (i+3) + '">' + versions[i] + '</a></li>').on("click",doThisOnClick);
总结

以上是内存溢出为你收集整理的html – jQuery Mobile点击动态列表项上的事件全部内容,希望文章能够帮你解决html – jQuery Mobile点击动态列表项上的事件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1067403.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存