JQuery click事件在mvc中动态创建的ul Li列表上不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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.4K2 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 正在进行和已完成选项操作当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表

4.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

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

2.5K2 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 正在进行和已完成选项操作

3.8K2 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事件。

1.3K2 0

Vuex原来可以这样上手

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

1.1K5 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

5K2 0

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

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

5.6K6 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.点击的删除按钮，可以删除当前的微博留言。

2.3K4 1

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

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

8434 0

Web前端基础（07）

"> //给第一个按钮添加点击事件 $("input:eq(1)").click(function(){ //创建li var li = $("li>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

5.8K2 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.9K4 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>后来创建的lili>"); $("ol").append(li); 2.事件处理 off() 解绑事件可以移除通过 on() 方法添加的事件处理程序。

23K5 0

jQuery性能优化指南

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

1.2K1 0

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

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

7.6K0 0

1. VUE完整系统简介

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

2.5K1 0

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

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

6563 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

3.5K10 0

JQuery高级

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

2K5 0

学习jQuery这一篇就够了

需求描述：设置 ul 列表标签的 li 列表项 ul>ul> var li = 'li>我是列表项li>'; $('ul').html(li); 需求描述：获取 ul 列表中的列表项并输出...() 方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。...注意：同时移除元素上的事件及 jQuery 数据需求描述：将 ul 列表下所有的 p 子节点全部移除 ul> li>列表项1li> 我是段落1 li...需求描述：为 ul 列表创建一个深克隆并追加到 body 后 ul> li>列表项1li> li>列表项2li> li>列表项3li> ul> var...需求描述：要求移除上一节中设置的事件委托，然后在分别点击 li 进行验证是否移除事件委托 ul> li>1111li> li>2222li> li>3333li

3.5K5 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭