首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

javascript $(Document)单击(‘.on’)在html中不起作用

问题描述:在HTML中,使用JavaScript的$(document).on('click', '.class')绑定事件无效。

回答:

在HTML中,使用JavaScript的$(document).on('click', '.class')绑定事件无效的原因可能有以下几种:

  1. jQuery库未正确引入:在使用$(document).on()方法之前,需要确保已正确引入jQuery库。可以通过在HTML文件中添加以下代码来引入jQuery库:<script src="https://cdn.jsdelivr.net/npm/jquery"></script>或者下载jQuery库文件并在HTML文件中引入:<script src="path/to/jquery.min.js"></script>
  2. 代码执行时机不正确:确保代码在DOM加载完成后执行。可以将代码放在$(document).ready()方法中,以确保在DOM加载完成后执行绑定事件的代码。示例:$(document).ready(function() { $(document).on('click', '.class', function() { // 事件处理逻辑 }); });
  3. 选择器或类名错误:确保选择器或类名正确无误。在.on()方法中,第二个参数是选择器或类名,用于指定要绑定事件的元素。请检查选择器或类名是否正确,并确保存在对应的元素。
  4. 动态添加的元素未被绑定事件:如果要绑定事件的元素是通过JavaScript动态添加的,需要使用事件委托的方式来绑定事件。可以将.on()方法的第一个参数改为静态的父元素,然后通过第二个参数指定要绑定事件的子元素选择器或类名。示例:$(document).on('click', '.class', function() { // 事件处理逻辑 });

总结:

当在HTML中使用JavaScript的$(document).on('click', '.class')绑定事件无效时,需要确保正确引入jQuery库,代码在DOM加载完成后执行,选择器或类名正确,以及对于动态添加的元素使用事件委托方式绑定事件。

推荐的腾讯云相关产品:腾讯云云函数(Serverless Cloud Function)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTMLdocument的作用,htmldocument对象是什么?一篇文章让你了解document对象

本篇文章主要的介绍了关于HTML document对象的解释,还有关于HTML document对象的使用实例解析,接下来让我们一起来看这篇文章吧 首先我们来介绍一下HTMLdocument对象:...通过document对象可以访问HTML文档包含的任何HTML标记并可以动态的改变HTML标记的内容。 例如表单、图像、表格和超链接等。...再来看看HTMLDocument对象集合: 来看看网上对HTMLdocument对象的描述: HTMLDocument接口对DOM Document接口进行了扩展,定义HTML专用的属性和方法...write()方法值得注意,文档载入和解析的时候,它允许一个脚本向文档插入动态生成的内容。...2级DOM,该方法已经被转移到了Document接口,它现在由HTMLDocument继承而不是由它定义了。

1.5K10

JavaScriptdocument.cookie的使用

我们已经知道, document 对象中有一个 cookie 属性。但是 Cookie 又是什么?“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie。”...一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件、程序等创建的,但是 javascript 也提供了对 Cookies 的很全面的访问权利。   ...URL 编码的字符”。...例如,某文档添加“document.write(documents.cookie)”,结果显示: name=kevin; email=kevin@kevin.com; lastvisited=index.html...不指定失效日期,则浏览器默认是关闭浏览器(也就是关闭所有窗口)之后过期。   首先 escape() 方法:为什么一定要用?因为 Cookie 的值的要求是“只能用可以用在 URL 编码的字符”。

1K10
  • HTML中使用JavaScript

    当网页嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 <script type...type属性 标签默认就是JavaScript代码,嵌入javascript脚本时,type属性可以省略 如果type属性的值,浏览器不认识,就不会执行其中的代码,所以可以<script...网页 解析过程,发现带有defer属性的元素 浏览器继续往下解析HTML网页,同时并行下载元素加载的外部脚本 浏览器完成解析HTML网页,此时再回过头执行已经下载完成的脚本...HTML网页,同时并行下载标签的外部脚本 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本 脚本执行完毕,浏览器恢复解析HTML网页 需要注意: 异步加载资源 并不会按照顺序执行...async设置为false可以保证b.jsa.js后面执行 在这段代码后面加载的脚本文件,会等b.ja执行完成后再执行 相关知识点总结 包含在标签内部的JavaScript代码,将被从上到下一次解析

    1.4K30

    HTMLjavascript交互

    Android开发,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTMLjavascript...这篇给大家介绍下如何实现Android与HTML+JS的交互。 有的人可能不理解什么是javascript,可以简单理解为它在HTML的作用就相当于你java写的函数(方法)差不多。...本篇主要实现的功能点: Android 调用HTMLjavascript脚本 HTMLjavascript脚本调用Android本地代码 Android 调用HTMLjavascript脚本并传递参数...HTMLjavascript脚本调用Android本地代码并传递参数 实现Android调用JS脚本是非常简单的,直接Webview调用loadUrl方法,里面是JS的方法名,并可以传入参数,javascript...对象,这里我直接传this,第二个参数是别名,JS脚本通过这个别名来调用java的方法,这个别名跟HTML代码也是对应的。

    3.9K50

    html script 换行,JavaScript怎么换行

    js换行的方法:1、使用【\n】换行符,代码为【alert(“第一行\n第二行”)】;2、使用【\r】换行符,代码为【alert(“第一行\r第二行”)】;3、使用HTML的【 】标签。...本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。...JavaScript换行的方法: 方法1:使用换行符 1、\n换行符 JavaScript我们可以直接在要换行的地方使用\n进行换行: alert(“第一行\n第二行”); 2、\r换行符 alert...(“第一行\r第二行”); 上面两种方法运行结果相同: 方法2:使用HTML的 标签 当可向HTML文档写入内容时,可以使用HTML的 标签来进行换行。...示例:使用document.write() document.write(“第一行 第二行”) 输出:第一行 第二行相关免费学习推荐:javascript(视频) 版权声明:本文内容由互联网用户自发贡献

    9.5K40

    2 《JavaScript高级程序设计》__ HTMLJavaScript

    工作这么多年,到现在为止对这本书都没有一个系统的知识点记录,这次想从头读一遍这一本JavaScript高级程序设计【第4版】,并把重要的知识点记录下来,同时加上自己的见解,这也是我第一次掘金上记录分享读书笔记...关注专栏,一起学习吧~ script 标签 script标签出现的原因是为了解决早期js引入html页面的同时,不会导致页面在其他浏览器渲染出问题。...通过的方式可以将一段script脚本插入到html,或者引入到html。...一般情况下始终为text/javascript,如果值为moddule,则代码会被当成ES6模块,只有这时候,代码才能出现import和export关键字。...noscript标签是不支持js的浏览器才生效的,如果支持,则看不到该标签内的内容。

    1K30

    如何在 JavaScript 处理 HTML 事件?

    前言 Web开发JavaScript是一种常用的脚本语言,用于增强网页的交互性和动态性。HTML事件是用户与网页交互时发生的动作,如点击、鼠标移动、键盘输入等。...本文将介绍如何在JavaScript处理HTML事件,以实现更丰富的用户体验和交互功能。 什么是HTML事件 HTML事件是指在网页中发生的用户交互动作,如点击、鼠标移动、键盘输入等。...通过JavaScript,我们可以对这些事件进行监听和处理,以实现相应的功能。 JavaScript处理HTML事件的方法 JavaScript,可以使用多种方法来处理HTML事件。...1 HTML元素上直接定义事件处理程序 通过HTML元素上使用"on"开头的事件属性,可以直接定义事件处理程序。...使用事件监听器可以同时处理多个事件,也可以需要时移除事件监听器。 总结 JavaScript处理HTML事件是实现网页交互和动态功能的重要手段。

    26610

    List.append() Python 不起作用,该怎么解决?

    Python ,我们通常使用 List.append() 方法向列表末尾添加元素。然而,某些情况下,你可能会遇到 List.append() 方法不起作用的问题。...问题描述虽然 List.append() 方法通常在 Python 运行良好,但在某些情况下,它可能无法正常工作。以下是一些可能导致 List.append() 方法不起作用的情况:1....变量重新赋值 Python ,列表是可变对象,也就是说,它们可以通过引用进行修改。...列表作为函数参数另一个导致 List.append() 方法不起作用的常见情况是将列表作为函数的参数传递。 Python ,函数参数传递是通过对象引用实现的。...结论List.append() 方法 Python 通常是一个方便且常用的方法,用于向列表末尾添加元素。然而,当遇到某些情况时,它可能不起作用

    2.7K20
    领券