Jquery 在ios上事件委托失效

点击通过js遍历出来的列表,跳转页面。点击事件委托在document上,

像这样: $(document).on("click",".nav",function(){  })

在web和Android上度没问题,能够正常跳转。但是在ios上点击没有任何反应。原因是:ios上事件委托不能绑定在document和ios上,应该绑定在它的其它父级元素上

        $.each(dataall,function(i,item){
              str += ‘<div class="nav shadow-black" data-str="‘
              +item.data_str
              +‘"><div class="nav-item"><img src="‘
              +item.myheadimgurl
              +‘"  /><div class="ellipsis">‘
              +item.myusername
              +‘</div></div><div class="nav-item alike"><div>VS</div><div>‘
              +item.addtime
              +‘</div></div><div class="nav-item"><img src="‘
              +item.compareheadimgurl
              +‘"  /><div class="ellipsis">‘
              +item.compareusername
              +‘</div></div></div>‘;
            });
            $("#shareContent").html(str);
//ios点击没反应,未触发事件
$(document).on(‘click‘,‘.nav‘,function(){
    var data_str = $(this).data(‘str‘);
    window.location.href = ‘http://test.epoque.cn/user/footcompare/compare_foot?data_str=‘+ data_str;
})

//将事件委托在其他元素上,ios点击可跳转
$(‘#shareContent‘).on(‘click‘,‘.nav‘,function(){
    var data_str = $(this).data(‘str‘);
    window.location.href = ‘http://test.epoque.cn/user/footcompare/compare_foot?data_str=‘+ data_str;
})

另外一个问题:经常在ios上一个按钮点不了,像这样<span>按钮</span>,原因是语义化的问题,可以用a标签或者button,解决办法:加样式:cursor:pointer。

原文地址:https://www.cnblogs.com/rachelch/p/9559094.html

时间: 2024-10-01 07:52:46

Jquery 在ios上事件委托失效的相关文章

【jQuery源码】事件委托

jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事件的委托设计.事件源我们成为委托节点,委托节点委托他的祖先节点替他执行事件处理,这个祖先节点被成为被委托节点. DOM的原生事件将处理绑定在相应的节点上,相应节点触发事件才能执行处理.将事件处理委托给祖先节点,这个事件处理是附加到祖先节点的.那么需要做到的是,原节点触发了事件,想要执行已经附加到祖先

ios上position:fixed失效问题

手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="main_comment">```````````````````</div> <div class="commentBar">回复框</div> .main_comment{ width: 100%; position: absolute;

[ 面试没回答上的问题2]IOS上给body绑定click事件的bug

面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari内核,所以ios浏览器全部中枪. bug描述 在进行事件委托时,如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效,调试结果为事件响应到body子元素为止,既没有冒泡到body上,也没有被body所捕获.但如果事件是DOM元素本身具有的,则不会触发bug.换而言之,只有元素的

通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案

问题描述: 如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上的问题,但是这种情况的确是遇到了多次,问题原因有待日后深入理解,下面记载一下问题的解决方案. 解决方案: 方案一:将事件绑定直接写在行内标签上"<thead onclick='myFunction(this)' >",其中,this代表的是当前元素,是一

iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框

上周遇到两个坑. 一是jQuery的on方法 事件冒泡,在iOS中有问题. $("body").on("click",".contentup",Reply.replyOneHandler); 上面这句,在iOS中没有反应.百度和Google了下,没有太权威的解释.只是大概说,iOS的冒泡,如果一直没有handler来处理事件,则只会冒泡到body的内层,而不会冒泡到body上.因此,只好加了个children()这么干了: $("bod

Jquery事件委托之Safari

什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理 事件委托将事件监听绑定在目标元

jQuery代码优化:事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台 MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快

jQuery事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供了live().dalegate()和on()方法. 事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此

jQuery代码优化 事件委托篇

<转自 http://www.jb51.net/article/28770.htm> 参考文章:  解密jQuery事件核心 - 绑定设计(一) 参考文章:  解密jQuery事件核心 - 绑定设计(二) jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快