新插入ul中的＜li＞标签无法绑定点击事件

最新推荐文章于 2023-10-31 17:56:01 发布
最新推荐文章于 2023-10-31 17:56:01 发布
阅读量1.6k 收藏
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiyue1016/article/details/108716823
版权
在JavaScript中，动态插入的li标签无法绑定点击事件。问题源于搜索框失去焦点事件导致显示ul的盒子变为none，使得li点击事件失效。尽管鼠标移入事件可以正常工作，但点击事件在当前实现下不触发。
摘要由CSDN通过智能技术生成

我做的是搜索框下，关联数据显示
下面是html基本结构。

 <input class="search" type="text" value="目的地：北京，上海，深圳" id="search">
        <ul class="search-like" id="list-box">

        </ul>

ul内没有li，通过模板引擎方法插入从后台接收到的数据到ul中；
在给li绑定事件过程中遇到了问题，在外部绑定事件会无效，因为li是后面动态生成的，也就是说在模板引入后才有li，所以要把绑定li的点击事件代码放入
下面为js代码。

//根据输入内容得到类似数据
var timer = null;
searchInp.oninput = function()
最低0.47元/天 解锁文章
十樾菠萝
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态生成的li标签，绑定点击事件无效
cutsmallji的博客
09-27 5749
    在最近的一个项目中，有一个li标签做成的页签，打开这个页签需要满足我的条件才能打开，否则不能打开。 就得给他绑定一个点击事件，开始我是 $("ul li:eq(0)").click(function(){}); 发现这段代码放在$(function(){});这个里面才有效，如果提出来，就没有效果。 后面发现可以在$(function(){});这个代码块中给li标签绑定一个on...
关于li标签进行点击事件绑定动态参数绑定失败的问题
qq_29109193的博客
07-04 843
错误方式：$('#name1 li').on('click',function(){        $(this).siblings('li').removeClass('current');        $(this).addClass('current');    });上面这么写只能绑定到页面上已经写好的li标签，动态参数就会无法绑定上，如果要解决这个问题要多加个参数$('#name1 u...
jquery ul的li我通过后台查询数据遍历进行添加，li的click事件不执行问题
menghuannvxia的专栏
03-08 536
ul的li我通过后台查询数据遍历进行添加，li的click事件不执行，原来 click事件的注册，在页面加载时就已经完成了（当前页面有几个ul，li就注册几个。后来添加的，都不会注册click事件） 解决方法：把事件注册到document上面。这样当执行事件时，会冒泡触发。 ...
ajax动态生成li标签无法与事件绑定
sinat_34163739的博客
11-02 2115
$("").click()方法绑定的前提是li已经存在   如果是动态生成的    click事件无法绑定成功。这时候就要用$("父级元素").on("click","要绑定事件的元素或类",function(){dosomething}); 这样就可以了；
点击jq动态生成的li不触发点击事件
qq_38257857的博客
04-10 1360
参考：https://blog.csdn.net/sinat_38737592/article/details/89786896 动态生成代码（给ul中追加li）： $('.chat_left').append('<li class="chat_'+from_uid+'" data-block="'+from_uid+'"><a href="javascript:">...
el-button 设置为浮动的元素以后点击事件无效
weixin_45677987的博客
10-25 2166
1: 使用element-ui 组件库的时候, 使用点击事件无效: 点击按钮无效, 可以在@click是事件后边加上 .native 事件修饰符 还需要添加一个属性, position: relative: 设置为相对定位。
jQuery动态添加li标签并添加属性和绑定事件方法
10-18
在本文中，我们将深入探讨如何使用jQuery来动态地添加`li`标签，并向这些标签添加属性以及绑定事件。首先，让我们解析一下标题和描述中提到的关键知识点。 **jQuery动态添加li标签** 在jQuery中，我们可以使用`...
Jquery对新插入的节点 绑定Click事件失效的解决方法
11-23
1.有人说用 Live， 事实上现在最新的Jquery已经不支持 Live 了。live的解决方法如下： 你可以看这个 也可以不看 ，只是做到心中有数就可以了。下面介绍ON的方法。 live：Live的使用介绍 ...“<li><a>链接</a></l
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者...需要给<ul>里面动态添加的<li>标签添加click事件   jquery 1.7版以前使用live
HTML元素(标签)大全及使用介绍
09-28
15. `<button>` 标签：创建一个可点击的按钮，可以绑定JavaScript事件。 16. `<caption>` 标签：为表格添加标题。 17. `<center>` 标签：使内容居中，HTML5中不推荐使用，建议使用CSS的`text-align`属性。 18. `...
Vue.js在数组中插入重复数据的实现代码
10-18
<li v-for="value in arrMsg" track-by="$index"> {{value}} </li> </ul> <button type="button" @click="add">增加数据</button> </div> <script type="text/javascript"> window.onload = function() { vm...
jQuery li click失效问题
weixin_34004750的博客
03-17 335
转自：http://blog.sina.com.cn/s/blog_64008ed70101nyoz.html 　　项目中使用到jQuery脚本插入一段代码，然后给代码加事件，但是click事件失效，网上找原因说是jQuery只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定. 代码如下： &lt;div class="hotel_info_pic" id="imgD...
搜索框input失去焦点事件和结果列表li的click事件冲突问题
heyNewbie的博客
06-09 1318
开发过程中，会经常遇到搜索需求，这就会涉及到input搜索框，外面还会有ul、div等搜索列表， 需要点击input外部进行操作时，收起或者隐藏搜索结果列表，首先我们会考虑到失去焦点来做 这就会有问题，点击事件和blur事件的先后执行 方法一：用setTimeout做的延迟隐藏（有小bug） 测试发现当鼠标点击并没有抬起是，会执行blur事件，（如果能接受的话） 我具体查了一下 blur事件，当元素失去焦点时触发的事件，为表单事件，blur和focus事件不会冒泡，其他表单事件都可以
使用mui提供的下拉刷新控件，导致li的onclick事件无法响应
shihua_t的博客
10-27 1139
使用了mui的刷新控件，发现li的onclick事件在mui提供的调试工具下可以响应，但是在chrome浏览器下的手机模式中调试无响应，解决方法 mui('.mui-table-view').on('tap', '.mui-table-view-cell', function () {   mui.openWindow({                url:
css实现li标签不可点击
weixin_40667880的博客
04-20 4517
css实现li标签不可点击，代码如下： style="pointer-events: none;"
jquery点击事件失效原因和解决办法
weixin_30346033的博客
07-17 1433
在使用jQuery绑定点击事件的时候，有时候会遇到点击无效，这种情况大多出现在动态添加元素的时候 例如：给demo里添加li元素给li绑定点击事件 $("#demo").append('<li>点我</li>'); 给li元素绑定点击事件 // 示范一 $("#demo li").click(function(){ alert($(thi...
html中li标点为什么动不了,html Li标签中的textarea标签无法获得焦点。
weixin_32440261的博客
07-05 363
1.用jquery写一个问卷，有一道题是如果选了这道题的某个选项 那么这个选项会被打钩并且会出现一个输入框供用户输入描述，如下图：再次点击这个选项则输入框消失，选项收起，我用的是Li标签，给Li标签绑定点击事件，如果被点击那么插入一个textarea标签，但是这时候被插入的textarea标签无法获得焦点，我想点击这个选项后点击输入框输入文字，但是选项被收起了，相当于触发了Li的点击事件，我的解决...
添加li标签点击事件，删除当前点击li标签
weixin_57772211的博客
04-28 2139
添加li标签点击事件，删除当前点击li标签
Selenium 点击＜li＞标签失效问题解决办法！
最新发布
纵行山河万里~
10-31 278
超级牛逼的selenium点击失效问题解决办法，懂了朋友可以试试举一反三，很多时候都是这些毛病！
for(var i = 0; i < images[settings.setIndex].length; i++) { if(images[settings.setIndex]['displayAsALink']){ if($('#'+settings.linksContainer).size() == 0){ this.filter(":first").before('<ul id="'+settings.linksContainer+'"></ul>'); } $('#'+settings.linksContainer).append('<li><a href="#" id="Choco_numsetIndex_'+settings.setIndex+'" class="Choco_link">'+settings.setTitle+'</a></li>'); e = this.parent(); $(this).remove(); if($.trim(e.html()) == ""){//If parent empty : remove it e.remove(); } return $('#Choco_numsetIndex_'+settings.setIndex).unbind('click').bind('click', {id: settings.setIndex, nom : settings.setTitle, i : settings.currentImage}, _initialise); } } function _initialise(event) { settings.currentImage = event.data.i; settings.setIndex = event.data.id; settings.setTitle = event.data.nom; settings.lastImage = images[settings.setIndex].length - 1; showChocolat(); return false; }解释以上代码
06-09
4. `$('#'+settings.linksContainer).append('<li><a href="#" id="Choco_numsetIndex_'+settings.setIndex+'" class="Choco_link">'+settings.setTitle+'</a></li>');`：将链接插入到链接容器中； 5. `e = this....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值