Ajax动态加载内容无法响应监听事件

作者: Rememberautumn 分类: JavaScript,Web前端 发布时间: 2015-05-25 12:19 阅读: 5,851

微信小程序转支付宝小程序命令行工具

wordpress转APP方案

mui + vue单文件组件开发， 热更新脚手架

做了一个瀑布流加载的照片墙网址：http://yymm.fddcn.cn/falls.php 想要在每个照片上加上mouseover的监听事件，每次鼠标悬浮就会显示预览的照片，于是我加了个监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(var x=10;
  var y=10;
  $('li a').mouseover(function(e){
    var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='预览'\/></div>";
    $('body').append(tooltip);
    $('#tooltip').css({
      "top":(e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    }).show("fast");
  }).mouseout(function(){
    //$('#tooltip').remove();
  }).mouseover(function(e){
    $('#tooltip').css({
      "top":(e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    });
  });
)

但是事件没有响应，也符合我的预期，因为执行监听事件的时候（理解的不深刻，自己想的，不对的请指正）应该是像一个堆栈一样，把DOM中符合要求的元素压到栈里进行监听，等DOM中新增的内容则不会加到栈中，除非像监听click等事件。

那么怎么解决这个问题呢，我的方法是在每次Ajax成功的回调里面都重新执行一遍回调函数，这样新增的符合要求的元素也会被加进去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(function(){
  //url data function dataType
  var  page=0;
  function loadMeinv(){
    
    var data = 0;
    $.getJSON(
    "http://localhost/yymm/php/falls_img.php",{page:page},
    function(data){
      page++;
        for(var i=0;i<=18;i+=2){
            var html = "";
            html = '<li><a class="alertimg" target="_blank" href="http://imgs.fddcn.cn/'+data[i]+'"><img src = http://imgs.fddcn.cn/'
          +data[i]+'></a><p>'
          +data[i+1]+'</p></li>';
      $minUl = getMinUl();
      $minUl.append(html);
          }
   shijian();
    }
  )
  }
  loadMeinv();
  $(window).on("scroll",function(){
    $minUl = getMinUl();
    if($minUl.height() <= $(window).scrollTop()+$(window).height()){
    //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
      
    }
  })
  function getMinUl(){//每次获取最短的ul,将图片放到其后
    var $arrUl = $("#container .col");
    var $minUl =$arrUl.eq(0);
    $arrUl.each(function(index,elem){
      if($(elem).height()<$minUl.height()){
        $minUl = $(elem);
      }
    });
    return $minUl;
  }
})
function shijian(){
  var x=10;
  var y=10;
  $('li a').mouseover(function(e){
    var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='预览'\/></div>";
    $('body').append(tooltip);
    $('#tooltip').css({
      "top":(e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    }).show("fast");
  }).mouseout(function(){
    //$('#tooltip').remove();
  }).mouseover(function(e){
    $('#tooltip').css({
      "top":(e.pageY+y)+"px",
      "left":(e.pageX+x)+"px"
    });
  });
}

 

 

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

一条评论
添加新评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

更多阅读
标签云
Ajax app c c++ css curl git html5 java JavaScript javaScript jQuery MUI mui学习 MUI框架学习 MUI框架教程 mysql php poj sae sql ubuntu uva vue weex wordpress wordpress for sae ytu ytuoj 刘汝佳 刷新 并查集 并行计算 总结 数据结构 水题 烟台大学 烟大 生活 第三极 算法入门经典 编码 编程 计算机与控制工程学院 许巍