开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JQuery click事件在mvc中动态创建的ul Li列表上不起作用

在MVC中动态创建的ul Li列表上，JQuery click事件不起作用可能是由于以下几个原因：

事件绑定时机不正确：如果动态创建的ul Li列表是通过异步请求获取的数据生成的，那么在绑定JQuery click事件时，需要确保数据已经加载完成并且DOM元素已经渲染完毕。可以使用JQuery的事件委托机制，将事件绑定到父元素上，然后通过事件冒泡的方式触发子元素的click事件。
元素选择器不正确：在JQuery中，通过选择器来选取元素进行事件绑定。如果动态创建的ul Li列表的选择器与绑定事件时使用的选择器不匹配，那么事件将无法正确绑定。可以使用JQuery的动态选择器，如$(document).on('click', 'ul li', function() {})，其中document可以替换为动态创建的ul Li列表的父元素。
事件处理函数错误：检查事件处理函数是否正确定义和实现。确保事件处理函数中的逻辑正确，并且没有其他错误导致事件无法触发。
其他可能的原因：可能是由于其他代码或插件的冲突或错误导致事件无法触发。可以尝试排除其他代码或插件的干扰，逐步调试定位问题。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，可快速创建和管理云服务器实例，满足各种计算需求。详情请参考腾讯云云服务器（CVM）产品介绍
腾讯云云数据库MySQL：腾讯云提供的高性能、可扩展的关系型数据库服务，支持自动备份、容灾、监控等功能，适用于各种规模的应用场景。详情请参考腾讯云云数据库MySQL产品介绍

相关搜索:Angularjs ng-click在动态生成的列表标记中不起作用 Asp.Net MVC 5jquery验证在带有提交事件的ajax post上不起作用，显示为有效表单 JQuery on click事件在带有超链接的下拉菜单中不起作用？jQuery事件在新创建的元素上不起作用 jquery表排序程序在动态创建的表上不起作用事件on ()；在动态加载的元素的jQuery中复制click ()事件在div中动态创建的输入值当前不起作用jQuery 在Google Apps Script日历事件中创建与会者的动态列表在无序列表中单击事件和动态创建的项当在javascript函数中动态创建div时，jquery的Click事件不起作用，除非在页面加载时才起作用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue之初体验

定义一个变量接收Vue构造函数构造出的实例，并且传入的参数是一个对象 const app = new Vue({}); 这个对象参数中的一些属性也有特定的作用。...{{message}} 浏览器运行我们可以在控制台动态修改h1中的内容（F12打开控制台，选择Console）在这可以明显的感受到，通过...// 5.将修改后的数据再次替换到div元素案例2 展示列表展示ul列表通过上一个案例，可以在每个li中，将需要的数据传入特定的li中，但是这种写法过于冗余...，items in movies的意思是，用for循环遍历movies数组，将获取的数据都赋给变量items，最后在li中展示items，这样就可以自动的生成li结构，并往li中添加items数据。...， v-on:click，就是添加click事件，在指令中让counter++和counter--， vue实例会动态监测到counter的变化，在点击后将改变的counter值添加到h1中

1.1K2 0

「jQuery」基础 - 03

身上的，但是触发的对象是 ul 里面的小li // (3) on可以给未来动态创建的元素绑定事件 // $("ol li").click(function() { // alert(11);...案例：发布微博案例点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。点击的删除按钮，可以删除当前的微博留言。 <!...因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...*/ }) $("ul").on("click", "li>a", function() { // on 可以为动态创建的元素绑定事件。...，然后存储给本地存储重新渲染加载数据列表因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表

2.8K3 0

$(document).on和$(#idname).on和$(function(){ })区别

引言　　在写前端的时候经常用到js或jquery语法，有时候傻傻分不清，现在将学习过程中遇到的总结一下。　　...'); }) 　　结果如下：后面动态创建的5和6，没法进行点击事件触发。　　...备注：这里需要注意的问题是如果元素是动态创建的话，这里就不能这样使用： // 动态的元素不能使用这种。...和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。...在事件的处理中，可以阻止冒泡但是允许默认事件的发生。　　总结　　在写web前端的时候，一些基础知识还是要去打扎实，不然写的时候会发现各种困难。

2.1K2 0

事件委托

事件委托也称事件代理，在jQuery里面就称为事件委派。事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...事件委托的原理不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点事件委托作用绑定事件越多，浏览器内存占用越大，严重影响性能只操作一次DOM...比如上例中，e.target 就是 li ，e.currentTarget 就是 ul 以上代码中，并没有给每一个元素绑定事件，只是给父节点ul绑定事件，但是点击每一个li时，可以变换其样式。...image.png 事件委托的优点： 1.减少事件注册，节省内存。在table上代理所有td的click事件。在ul上代理所有li的click事件。 2.可以监听动态生成的元素。...不用在新添加的li上绑定click事件。当删除某个li时，不用移解绑上面的click事件。

8672 0

前端成神之路-03_jQuery

（委派） // click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li // $("ul li").click();...on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11);...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。 2.点击的删除按钮，可以删除当前的微博留言。代码实现略。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作

3K2 0

Vuex原来可以这样上手

在Mvc模式大行其道的今天，后端通过各种Mvc框架实现视图与数据模型的隔离，而前端这方面也发展迅速。...第二部分：揭开vuex面纱本示例实现为一个输入框动态向下拉列表增加选择项的功能源码下载地址，先看效果图： ?...为了展示vuex的作用，此示例你可以看到如下内容：两个局部组件：输入和下拉列表组件一个全局组件：App，也是整个Vue实例的顶级组件一个jquery.js和bootstrap.js，用于实例下拉组件...重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。...vuex中创建的store实例传递进去。

8505 0

jQuery 事件注册、事件处理

on() 方法优势3：动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中 $...// 原来的方法此时的click不能给动态创建的a标签添加事件因为上面添加的a还没有触发这个查询不到 // $("ul a").click(function (...) { // $("li").remove(); // }); // on可以给动态创建的元素绑定事件 $("ul").on("click

3.8K2 0

jQuery 事件注册与事件处理

事件处理因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()，重点讲解如下：...()方法在匹配元素上绑定一个或多个事件的事件处理函数语法: element.on (events, [selector], fn) events:一个或多个用空格分隔的事件类型,如"click或"...（委派） // click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li // $("ul li").click(); ...) on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11); ...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。 2.点击的删除按钮，可以删除当前的微博留言。

1.7K4 1

大型项目技术栈第一讲 Vue.js的使用

1.3.2 然后修改名字–>Next–>完成;完成后里面是空的 1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具 1.3.4 创建mode.html(下面就是,其也是快速入门案例...-- 即事件不是从内部元素触发的 --> ......="fun1">弹出Vue中的username 弹出Vue中的address ...vue在生命周期中有这些状态： beforeCreate:创建VUE对象之前执行，此时data中的数据还未初始化，el还未关联到对应的id created:创建VUE对象之后执行,此时data中的数据已经初始化...beforeDestory:vue对象销毁前执行 destroyed:vue对象销毁后执行 Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

5K6 0

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

> // 使用事件代理绑定列表项点击事件 $('#myList').on('click', 'li', function() {...; }); // 动态添加一个列表项 $('#myList').append('Item 4'); 在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数。...这样，即使在页面加载完成后动态添加了新的列表项，它们仍然会受到事件的监听。标准方式：多个事件类型 on 方法不仅可以绑定单一的事件类型，还可以同时绑定多个事件类型。...; }); 在这个例子中，我们使用了事件委托，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数

1614 0

jQuery 事件注册和事件处理

/ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate...on()方法优势3:动态创建的元素, click0 没有办法绑定事件，on0 可以给动态生成的元素绑定事件 ("div") .on("click","p", function(){alert ("俺可以给动态生成的元素绑定事件...（委派） // click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li // $("ul li").click();...) on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11);...事件处理 off() 解绑事件当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。

4.3K4 0

jQuery

//DOM加载完成的入口 }) jQuery的顶级对象：$ `是jQuery 别称，在代码中`和jQuery和等价，为了方便都是$。...}) 例如： $(“div”).click(function(){ //事件处理程序 }) ---- jQuery 事件处理 1.事件处理 on() 绑定事件在匹配元素上绑定一个或多个事件的事件处理函数...//$(“div”).on(“mouseover mouseout”, function() { // ...... //}); 事件委派： //li的处理事件委派给父ul，里面每个li都有了click...; }); 注意：事件委派现在大多采用⬆️这种写法：优势在于当动态创建元素时，可以动态自动为其绑定事件例如：ol里添加li并动态绑定事件 $("ol").on("click", "li", function...; }) var li = $("后来创建的li"); $("ol").append(li); 2.事件处理 off() 解绑事件可以移除通过 on() 方法添加的事件处理程序。

21K5 0

02-老马jQuery教程-jQuery事件处理

绑定简单事件在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。参数： type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。...// live ：对动态创建的dom元素绑定事件。 // delegate : 事件委托绑定事件。...IE678：window.event 标准浏览器直接从事件处理程序的参数中获得事件对象e e = e || window.event; 在jQuery的事件处理程序中，可以直接获取事件对象，所有浏览器都兼容

6.4K0 0

jQuery性能优化指南

如下所示： var traffic_lights = $("#traffic_light input"); 2，在class前使用tag(标签名) 在jQuery中第二快的选择器是tag(标签)选择器...例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = [], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"..._100_list[i] + ""); } 我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示： var top_100_list = [],$mylist = $(...jQuery( expression, context ); 通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。...，这个方法的功能就是为新增的DOM元素动态绑定事件。

9251 0

Web前端基础（07）

"> //给第一个按钮添加点击事件 $("input:eq(1)").click(function(){ //创建li var li = $("");...str); //把创建的li添加到ul里面 $("ul").prepend(li); }) $("input:eq(2)").click(function(){ var..."> //先把所有二层ul隐藏 $("li>ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul..."> //给按钮添加点击事件 $("input:last").click(function(){ //在点击事件里面创建一个tr和五个td //5个td分别是nametd agetd

5K2 0

1. VUE完整系统简介

Vue列表展示　　　　下面来看一个稍微复杂一点的例子---列表展示　　　　先来看看效果 ? 　　　　下面思考, 如果我们使用jquery会如何实现呢?... {{item}} 注意红色粗体部分.... 以前我们要这么写一大堆, 如果是动态从服务端取数据, 那么还要拼li代码, 很容易出错, 还很费劲....这是vue的写法. v-on是vue的指令, 这里先有个印象, 后面会详细讲解. v-on表示要执行一个事件, :click就是具体的事件, 这里是点击事件, 点击后执行什么逻辑呢?...MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

2K1 0

JavaScript从初级往高级走系列————MVVM-Vue

"> submit <li v-for...数据和视图的分离，解耦（开放封闭原则，对扩展开放，对修改封闭）在jQuery中在jQuery代码中操作视图和数据，混在一块了以数据驱动视图，只关心数据变化，DOM操作被封装只改数据，视图自动更新...MVVM的理解 MVC （Model View Controller） 1.png 2.png MVVM （Model View ViewModel) 3.png View 通过事件绑定...> {{item}} 本质

4933 0

JQuery快速入门

DOM操作示例查找结点获取元素结点：var $li = $('ul li:eq(1)'); 获取属性结点：var p_txt = $li.attr('name'); 创建结点 jQuery工厂方法...在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。...这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了，此外，在jQuery中，可以通过event.preventDefault

2.5K10 0

JQuery高级

jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。其实$是jQuery中的一个函数。...当在入口函数里面的事件的时候，如果有大段的代码，一般工作中都是在外面封装一个函数，然后在事件中进行调用。...// }) // 3、*****$('li').on(字符串形式的事件属性, 匿名函数) // 表示只是在（没有作用1提高代码执行效率优点）给未来的li绑定事件而已...调用属性和函数：对象名.属性名对象名.方法调用对象内部写对象名可以写this JavaScript中没有$，只有jQuery中才有$ <!...在ajax做数据交互的时候，json是用的最多的数据格式用的最多的是列表、字典、字典列表相互嵌套等等，也有可能是文件 json特点之一：json中有字符串必须是双引号 json可以是文件，后缀名就是json

1.5K5 0

【Java 进阶篇】JQuery 事件绑定：`on` 与 `off` 的奇妙舞曲

Item 1 Item 2 Item 3 // 使用事件代理绑定列表项点击事件 $('#myList').on('click', 'li', function() {...; }); // 动态添加一个列表项 $('#myList').append('Item 4'); 在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数。...这样，即使在页面加载完成后动态添加了新的列表项，它们仍然会受到事件的监听。解绑事件 on 方法不仅能绑定事件，还能解绑事件，以避免不必要的执行。

1593 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭