代码之家  ›  专栏  ›  技术社区  ›  AndrewC

将事件绑定到出现的DIV

  •  1
  • AndrewC  · 技术社区  · 14 年前

    我是否可以创建一个事件,以便在具有特定ID的元素可见或出现在页面上时执行一些javascript?

    该元素来自远程资源(因此不在我的HTML代码中,但在页面加载时显示),我希望一些代码在出现时运行(并且只有当它出现时,它可能不会出现每一次加载)。

    谢谢!

    3 回复  |  直到 14 年前
        1
  •  1
  •   Marko Dumic    14 年前

    如果该元素出现在页面上,您可以创建一个每隔x毫秒检查一次的函数(纯javascript解决方案):

    (​function ()​ {
        var intervalId = window.setInterval(function() {
            if (null != document.getElementById('myDivId')) {
                // the div appeared on the page
                // ... do your stuff here:
                alert('its here!');
    
                // optionally stop checking (obviously it's there already 
                // unless you decide to remove it)
                window.clearInterval(intervalId);
            };
        }, 100); // perform check every 100 milliseconds
    }​)()​;
    

    有可能DIV一直在那里,只是不可见。所以您的检查功能应该有所不同:

    var el = document.getElementById('myDivId');
    if (null != el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {
    

    基本上 (el.offsetWidth > 0 || el.offsetHeight > 0) 指示元素未被其或其父级的CSS属性隐藏。

        2
  •  1
  •   Nick Craver    14 年前

    如果选择器找不到匹配项,它就不会运行,因此只使用这样的代码就可以了:

     $("#elementID").each(function() {
       //do something
     });
    

    只要在加载ID的任何代码中运行该语句,或者在Ajax处理程序中安装它,如果它是这样加载的:

    $.ajaxSetup({
       complete: function() {
        $("#elementID").each(function() {
         //do something
        });
       }    
     });
    
        3
  •  1
  •   Sarfraz    14 年前

    你可以使用 live() 方法:

    $('div_id_or_class').live('click', function(){
     // ................
    });