热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

单击时动态创建
  • 元素-Dynamicallycreate
  • elementonclick
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes

    I have the following on html

    我在html上有以下内容

    
    
        
        
    
        
    
    
    
    

    I am trying to get write a function to handle the event when any of the list element get clicked. But it doesn't seems to be triggering at all when I click on the

  • element.

    我试图编写一个函数来处理任何列表元素被点击时的事件。但是当我点击

  • 元素时,它似乎根本没有触发。

  • $('#addressList').on('click', 'li', function() {
        alert("clicked");
        alert( $(this).text() );
    
    });
    

    The

  • elements are created dynamically through this code:

  • 元素是通过以下代码动态创建的:

  • listCOntents= $("
  • " + addresses[i].lable + "
  • "); jQuery('#addressList').append(listContents);

    And I verified through my browser's console that they are being created correctly as such

    我通过浏览器的控制台验证了它们是否正确创建

    outerHTML: "
  • 6 Cashew Crescent
    6 Cashew Crescent. (S)679751
  • "

    Let's ignore about the dynamic list first. The thing is even my static list element are not responding to the event handler upon click. Have been trying to figure out the problem for a couple of hours now..

    我们先忽略动态列表。甚至我的静态列表元素在点击时没有响应事件处理程序。一直试图找出问题几个小时了..

    I have created a jsfiddle for my static li element not working https://jsfiddle.net/tmu50t9z/

    我为我的静态li元素创建了一个jsfiddle不工作https://jsfiddle.net/tmu50t9z/

    jsfiddle to my whole code > https://jsfiddle.net/8wwnx64x/

    jsfiddle to my code> https://jsfiddle.net/8wwnx64x/

    2 个解决方案

    #1


    0  

    $('#addressList li').on('click', function() {
        alert("clicked");
        alert( $(this).text() );
    
    });
    

    #2


    0  

    Work code, try this

    工作代码,试试这个

    HTML

    Javascript

    var a=0;
    $('#aaa').click(function() {
     $('#addressList').append('
  • 6 Cashew Crescent
    6 Cashew Crescent. (S)679751
  • '); a++ }); $( "#addressList" ).on( "click", "li", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });

    推荐阅读
    • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
    • AndroidJetpackNavigation基本使用本篇主要介绍一下AndroidJetpack组件Navigation导航组件的基本使用当看到Navigation单词的时候应 ... [详细]
    • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
    • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
    • CSS3选择器的使用方法详解,提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
    • Spring特性实现接口多类的动态调用详解
      本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍,以及getBeansOfType方法的应用,解决了在实际工作中遇到的接口及多个实现类的问题。同时,文章还提到了SPI使用的不便之处,并介绍了借助ApplicationContext实现需求的方法。阅读本文,你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
    • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
    • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
    • 本文介绍了一个在线急等问题解决方法,即如何统计数据库中某个字段下的所有数据,并将结果显示在文本框里。作者提到了自己是一个菜鸟,希望能够得到帮助。作者使用的是ACCESS数据库,并且给出了一个例子,希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句,得到的结果是650,但不知道如何得到560。希望能够得到解决方案。 ... [详细]
    • Html5-Canvas实现简易的抽奖转盘效果
      本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
    • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
      本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
    • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
    • JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ... [详细]
    author-avatar
    exu8145079
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有