用JQuery绑定点击事件、新增列表项

最新推荐文章于 2022-07-13 10:58:24 发布
最新推荐文章于 2022-07-13 10:58:24 发布
阅读量588 收藏 1
点赞数 1
文章标签： jquery javascript

一、在开发工具JQuery中新建个以下文档。

       

 

二、还要绑定一个JS以便设置功能

      这个要在外面引进JQuery文档中

      <script src="~/Content/js/jquery-3.2.1.min.js"></script>

     放在<body>标签中

    

 

三、设个<ul>标签里面设几个<li>标签

       然后去浏览器看下效果

       如下俩张图（图1、图2）

       图1

     

 

    图2

     

 

四、绑定点击事件：在<body>内写个<script>标签，在里头写JS功能

      给<ul>标签内的<li>标签设置 点击事件 和 点击li标签，li标签中的文字变颜色

     

 

     浏览器 效果：

     

 

     提示：利用这个方法绑定<ul>标签内的<li>标签点击事件

     

 

五、新增列表项：用JavaScript for循环 动态插入3个新的子元素li标签。代码如下：

       

 

      提示：利用这个方法

     

 

     浏览器 效果：

     

 

天L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2700
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4595
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
jquery为动态添加的元素绑定点击事件
smile0125的博客
05-17 886
&lt;html&gt;&lt;head&gt;    &lt;title&gt;jquery 点击动态添加的元素&lt;/title&gt;&lt;/head&gt;&lt;body&gt;    &lt;ul id="add-item"&gt;&lt;/ul&gt;    &lt;button id="add-btn"&g
Jquery支持绑定的事件列表
douyunqian668的博客
11-29 248
jquery1.10给新增元素绑定事件的方法
10-26
jquery1.10去除了.live()方法，新增了一个.on()方法来给元素绑定事件，下面有个不错的示例，大家可以参考下
多种jQuery绑定事件的实现方式
10-22
主要为大家详细介绍了多种jQuery绑定事件的实现方式，分享了jQuery防止重复绑定事件的解决方法，感兴趣的小伙伴们可以参考一下
JQuery 绑定事件时传递参数的实现方法
12-12
直接在funcionName 里用 this 就是 对 触发时间的元素本身的引用，如果你需要funcionName有更多参数的话，可以这样用： 2.$(“:text”).bind(“keyup”,function(){ funcionName(arg1,arg2,arg3,arg4); }); 3.有个...
jQuery实现当按下回车键时绑定点击事件
10-26
当按下回车键时，绑定按钮点击事件，本文为大家介绍下jQuery回车键绑定点击事件的具体实现
jquery绑定事件不生效的解决方法
12-10
今天在开发前台页面时发现jquery绑定click事件，怎么都不生效。代码如下： 1.html：<input id=”ceshisub” type=”button” value=”单击事件” > 2.html引用的test.js中的方法函数： 代码如下: $(“#...
【jQuery】jQuery操作之如何绑定事件_05
青春木鱼的博客
07-13 1020
在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定(仅限常用事件)，另一种是通过on()方法进行绑定(标准)。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。...............
JQuery 绑定动态元素的点击事件
weixin_44302759的博客
10-25 882
on()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素） $("#mainbody").on(“click”,".link",function(){ }); on前面的这个#mainbody一定要是html中存在的，静态的,否则点击事件触发不了 “.link"是动态加载出来的内容，它的class=”.link" on方法在什么条件下都是成立的 用jquery:为动态加载的元素添加点击事件其实也可以用 $(".link").click(function(){ }); 只不过是有限制的，这
jquery案例2——点击事件添加样式、鼠标经过事件、鼠标离开事件、一组、多组样式
努力、拼搏、奋进
05-16 1670
一、鼠标点击添加样式 （一）案例描述 鼠标点击li,添加盒子阴影。 （二）案例效果演示 （三）代码： 引入jq文件： <script src="http://code.jquery.com/jquery-latest.js"></script> css代码： <style> ul li { margin-bottom: 10px; padding: 10px; width: 400px; borde
JQuery实现动态添加的标签元素的点击事件
啊林博客
05-09 2万+
这里所说的动态添加的元素的意思是：用js添加的标签元素 先说一下我遇到的问题： 想对一些数据实现分页，就自己写一个分页功能。用的是bootstrap的分页，在页面获取数据列表后，计算出需要分多少页展示，然后用js生成多个页码（是叫页码吗？）。生成后，点击某个页码跳到相应的页，这时肯定要有点击事件。问题来了，没有点击事件。（最初一脸黑人问号）   这是因为在注册click后，再用...
jquery click()方法模拟点击事件对a标签不生效的解决办法
大智若愚的博客
06-05 3万+
<a href="www.baidu.com"></a>问题分析点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。 打印$(“a”)[0]，得到的是http://www.baidu.com，但实际上$(“a”)[0]是一个object对象，或许
jquery 动态生成表 绑定click事件，获取同行数据
rendiqi的博客
07-24 6917
这个问题纠结了好久，动态生成的表格，直接按照普通方式，onclick=“afun();”  无法在function内获取到正确的this，就无法获取表格其他项数据。绑定也无法成功，直接没反应。 后来debug了一下，感觉jquery绑定事件实在加载前进行的，此时还没有动态生成表格，因此就失败了吧。 解决方法如下：  1 JQuery动态生成表时，做好ID标记，class当然也可以 
jq一记，循环列表点击事件不生效，应该这么写
weixin_43857786的博客
08-19 467
dom节点 <div id="test"> <div class="evt">evt1</div> </div> 我们这么写发现点击事件没有用 <script> // 先绑定事件再添加div $('#test .evt').on('click', function() {alert($(this).text())}); </script> 我们应该这么写，才有触发点击事件效果 <script> $('body').
Jquery实现点击事件的四种写法
热门推荐
大脑和心脏都要跳动的97
07-03 5万+
1. $(".tab").click(function () { })2. $(".tab").on("click",function () { })3. $(document).on("click", ".tab",function () { })4. 使用&lt;onclick=""&gt;触发函数以上四种方法在不同设备上的可行程度自测。3&gt;2&am
JQ给select的option添加点击事件
yeah_nn的博客
06-06 3万+
我们在用到下拉列表框select时，需要对选中的&lt;option&gt;选项触发事件，其实&lt;option&gt;本身没有触发事件方法，我们只有在select里的onchange方法里触发。想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选option呢就触发了！！！解决方案：  给selec...
JQuery给动态生成的DOM元素绑定点击事件
qj30212的博客
08-31 5632
最近做项目的时候，使用ajax调用后台数据来动态生成页面内容。然后在给那些内容绑定一个点击事件的时候，发现点击竟然无效了。原因是：ajax有个请求时间，无论是同步还是异步，JQuery进行的绑定都会在页面加载完后立刻进行，而不是等待ajax请求完。也就是说，绑定的元素绑空了。那这个问题怎么解决呢。方法如下： 在动态生成的时候绑定一个函数，并把对象传进去，如： strhtml = str
jquery动态绑定点击事件
最新发布
09-21
要动态绑定点击事件，你可以使用jQuery的`on()`方法。这个方法可以为现有的元素和未来添加到文档中的元素绑定事件处理程序。 下面是一个示例，展示如何动态绑定点击事件： ```javascript $(document).on("click", "#myElement", function(){ // 在此处放置你的点击事件处理代码 }); ``` 在上面的代码中，我们使用了`on()`方法来为`#myElement`元素绑定点击事件。无论这个元素是否存在于文档中，点击事件都会被捕捉到。 你可以将`#myElement`替换为你要绑定事件的元素的选择器，并在事件处理程序中编写自己的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值