如何将jquery动态生成的数据绑定事件

 必须要使用事件绑定!

 我使用on事件绑定

  1. 父级元素在on时间之前
  2. 之后你需要绑定事件的子元素
$(‘.photo-main‘).on(‘mouseenter‘,‘.photo-box‘,function(){
          $(this).find(‘img‘).css({
              ‘-webkit-filter‘:‘brightness(.5)‘,
          });
          $(this).find(‘.image-tit‘).css({
              ‘display‘:‘block‘,
          });
      });

错误代码:下面这代码无法运行,注意绑定事件时,需要子元素

$(‘.photo-main .photo-box‘).on(‘mouseenter‘,function(){
          $(this).find(‘img‘).css({
              ‘-webkit-filter‘:‘brightness(.5)‘,
          });
          $(this).find(‘.image-tit‘).css({
              ‘display‘:‘block‘,
          });
      });
时间: 2024-11-05 00:52:55

如何将jquery动态生成的数据绑定事件的相关文章

jquery动态生成元素的事件绑定

<html> <head> <meta charset="utf-8"> <meta name="view" content="width=device-width;user-scalable=no;initial-scale=1.0"> <script src="jquery.js"></script> <style> .image-host

jquery动态生成html代码绑定事件

今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法. 我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码: <div class="h3"> <h3>李健1</h3&

jQuery动态生成&lt;select&gt;下拉框

前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方式 (1)将数据放在model中,JSP页面用EL表达式${}取出,该方式缺点是数据更改时必须刷新整个页面,本文不过多描述. (2)就是本文要说的jQuery动态生成了,该方式适合数据频繁变动的场景. 2.<select>组成 <select> <option value=”aa

毕业设计---jQuery动态生成的a标签的事件绑定

这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$(element).click();来添加点击事件,通过网上的查询,在动态添加的标签绑定事件需要通过事件委托而非事件绑定. $("body").on("click", ".delete", function (){ del($(this).paren

解决jquery 动态生成的元素的事件无法绑定

一.错误示例:对于自己用脚本动态生成的元素,无法绑定事件.例如: body下的代码: <body> <ul>     <li><span class="class1">11111</span></li>     <li><span class="class1">22222</span></li>     <li><span cla

关于动态生成dom绑定事件失效的原因

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1.事件失效的原因:(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到

jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', function(){ //.............. }); 也就是说<p>元素必须为页面加载的时候就有的,不是动态生成的.这样才行.

jquery动态生成dom(比如append)导致js事件无效

如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序. <div id="zkdiv">  <input type="button" value="展开" id="zk" class="zk"/> <br> </div> $("#zkdiv").on("click",".zk&qu

jquery动态生成的元素的事件

jquery中的live()方法在jquery1.9及以上的版本中已被废弃了,如果使用,会抛出TypeError: $(...).live is not a function错误. 解决方法: 之前的用法: .live(events, function) 新方法: .on(eventType, selector, function) 若selector不需要,可传入null 例子1: 之前: $('#mainmenu a').live('click', function) 之后: $('#mai