Fatal编程技术网
  • javascript/
  • Javascript 如何隐藏动态生成的div

Javascript 如何隐藏动态生成的div

javascript

Javascript 如何隐藏动态生成的div,javascript,Javascript,有人能告诉我如何删除这个div吗 我试了我能找到的一切。我尝试过的一些方法是： jQuery(document).ready(function ($) { if (seconds == 0 ) { $(".meows").hide(); return; } }); 这： 这： 这： 还有更多。其中大部分实际上都会消除错误。我得到的错误是： TypeError: Cannot rea

有人能告诉我如何删除这个div吗

我试了我能找到的一切。我尝试过的一些方法是：

jQuery(document).ready(function ($) {
            if (seconds == 0 ) {
                $(".meows").hide();
                return;
            }
});
这：

这：

这：

还有更多。其中大部分实际上都会消除错误。我得到的错误是：

TypeError: Cannot read property 'style' of undefined
它是一个弹出式通知。它会在body标签的正下方弹出。所以它不是一直在那里

以下是创建弹出窗口的位置：

  if (typeof default_meow_area === 'undefined' && typeof options.container === 'undefined') {
    default_meow_area = $(window.document.createElement('div'))
        .attr({'id': ((new Date()).getTime()), 'class': 'meows'});
    $('body').prepend(default_meow_area);
  }
我不确定这是否有足够的信息来解决这个问题，所以这里是整个js文件：

(function ($, window) {
  'use strict';
  // Meow queue
  var default_meow_area,
    meows = {
      queue: {},
      add: function (meow) {
        this.queue[meow.timestamp] = meow;
      },
      get: function (timestamp) {
        return this.queue[timestamp];
      },
      remove: function (timestamp) {
        delete this.queue[timestamp];
      },
      size: function () {
        var timestamp,
          size = 0;
        for (timestamp in this.queue) {
          if (this.queue.hasOwnProperty(timestamp)) { size += 1; }
        }
        return size;
      }
    },
    // Meow constructor
    Meow = function (options) {
      var that = this;

      this.timestamp = new Date().getTime();  // used to identify this meow and timeout
      this.hovered = false;                   // whether mouse is over or not

      if (typeof default_meow_area === 'undefined'
          && typeof options.container === 'undefined') {
        default_meow_area = $(window.document.createElement('div'))
            .attr({'id': ((new Date()).getTime()), 'class': 'meows'});
        $('body').prepend(default_meow_area);
      }

      if (meows.size() <= 0) {
        if (typeof options.beforeCreateFirst === 'function') {
          options.beforeCreateFirst.call(that);
        }
      }

      if (typeof options.container === 'string') {
        this.container = $(options.container);
      } else {
        this.container = default_meow_area;
      }


      if (typeof options.title === 'string') {
        this.title = options.title;
      }

      if (typeof options.message === 'string') {
        this.message = options.message;
      } else if (options.message instanceof $) {
        if (options.message.is('input,textarea,select')) {
          this.message = options.message.val();
        } else {
          this.message = options.message.text();
        }

        if (typeof this.title === 'undefined' && typeof options.message.attr('title') === 'string') {
          this.title = options.message.attr('title');
        }
      }

      if (typeof options.icon === 'string') {
        this.icon = options.icon;
      }
      if (options.sticky) {
        this.duration = Infinity;
      } else {
        this.duration = options.duration || 7000;
      }

      // Call callback if it's defined (this = meow object)
      if (typeof options.beforeCreate === 'function') {
        options.beforeCreate.call(that);
      }

      // Add the meow to the meow area
      this.container.append($(window.document.createElement('div'))
        .attr('id', 'meow-' + this.timestamp.toString())
        .addClass('meow')
        .html($(window.document.createElement('div')).addClass('inner').html(this.message))
        .hide()

.fadeIn('400', function() {

        $('.meows').animate({'bottom':'0'},500);
 }));

      this.manifest = $('#meow-' + this.timestamp.toString());

      // Add title if it's defined
      if (typeof this.title === 'string') {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('p')).text(this.title)
        );
      }

      // Add icon if it's defined
      if (typeof that.icon === 'string') {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('div')).addClass('icon').html(
            $(window.document.createElement('img')).attr('src', this.icon)
          )
        );
      }

      // Add close button if the meow isn't uncloseable
      // TODO: this close button needs to be much prettier
      if (options.closeable !== false) {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('a'))
            .addClass('close')
            .html('&times;')
            .attr('href', '#close-meow-' + that.timestamp)
            .click(function (e) {
              e.preventDefault();
              that.destroy();
            })
        );
      }

      this.manifest.bind('mouseenter mouseleave', function (event) {
        if (event.type === 'mouseleave') {
          that.hovered = false;
          that.manifest.removeClass('hover');
          // Destroy the mow on mouseleave if it's timed out
          if (that.timestamp + that.duration <= new Date().getTime()) {
            that.destroy();
          }
        } else {
          that.hovered = true;
          that.manifest.addClass('hover');
        }
      });

      // Add a timeout if the duration isn't Infinity
      if (this.duration !== Infinity) {
        this.timeout = window.setTimeout(function () {
          // Make sure this meow hasn't already been destroyed
          if (typeof meows.get(that.timestamp) !== 'undefined') {
            // Call callback if it's defined (this = meow DOM element)
            if (typeof options.onTimeout === 'function') {
              options.onTimeout.call(that.manifest);
            }
            // Don't destroy if user is hovering over meow
            if (that.hovered !== true && typeof that === 'object') {
              that.destroy();
            }
          }
        }, that.duration);
      }

      this.destroy = function () {
        if (that.destroyed !== true) {
          // Call callback if it's defined (this = meow DOM element)
          if (typeof options.beforeDestroy === 'function') {
            options.beforeDestroy.call(that.manifest);
          }
          that.manifest.find('.inner').fadeTo(400, 0, function () {
            that.manifest.slideUp(function () {
              that.manifest.remove();
              that.destroyed = true;
              meows.remove(that.timestamp);
              if (typeof options.afterDestroy === 'function') {
                options.afterDestroy.call(null);
              }
              if (meows.size() <= 0) {
                if (default_meow_area instanceof $) {
                  default_meow_area.remove();
                  default_meow_area = undefined;
                }
                if (typeof options.afterDestroyLast === 'function') {
                  options.afterDestroyLast.call(null);
                }
              }
            });
          });
        }
      };
    };

  $.fn.meow = function (args) {
    var meow = new Meow(args);
    meows.add(meow);
    return meow;
  };
  $.meow = $.fn.meow;
}(jQuery, window));

/*!  countdown timer I added below  */

        var timeoutHandle;
        function countdown(minutes,stat) {
            var seconds = 60;
            var mins = minutes;
        if(getCookie("minutes")&&getCookie("seconds")&&stat)
        {
            var seconds = getCookie("seconds");
            var mins = getCookie("minutes");
        }
        function tick() {
            var counter = document.getElementById("timer");
            setCookie("minutes",mins,10)
            setCookie("seconds",seconds,10)
            var current_minutes = mins-1
            seconds--;
            counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
            //save the time in cookie
            if( seconds > 0 ) {
                timeoutHandle=setTimeout(tick, 1000);
            } else {
                if(mins > 1){  
                setTimeout(function () { countdown(parseInt(mins)-1,false); }, 1000);
                }
            }
            jQuery(document).ready(function () {
            if (seconds == 0 ) {
                document.getElementsByClassName("meows")[0].style.display = "none";
                //document.getElementById('timer').innerHTML = 'EXPIRED!';
                return;
            }
            )};         
        }
        tick();
    }
    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    window.onload = function startingTimer(){
        //countdown(prompt("Enter how many minutes you want to count down:"),true);
          countdown(1,true);
    }

（函数（$，窗口）{
"严格使用",；
//喵喵叫队列
var默认值显示区域，
喵喵叫={
队列：{}，
新增：功能（喵喵）{
this.queue[meow.timestamp]=meow；
},
get：函数（时间戳）{
返回此。队列[时间戳]；
},
删除：函数（时间戳）{
删除此。队列[时间戳]；
},
大小：函数（）{
var时间戳，
尺寸=0；
for（此.queue中的时间戳）{
if（this.queue.hasOwnProperty（timestamp））{size+=1；}
}
返回大小；
}
},
//喵喵构造函数
Meow=功能（选项）{
var=这个；
this.timestamp=new Date（）.getTime（）；//用于标识此喵喵叫和超时
this.hovered=false；//鼠标是否在上方
如果（默认值的类型\u meow\u区域==='undefined'
&&typeof options.container==“未定义”）{
默认\u meow\u area=$（window.document.createElement（'div'））
.attr（{'id'：（（new Date（））.getTime（）），'class'：'meows}）；
$（'body'）.prepend（默认显示区域）；
}
如果（meows.size（）1）{
setTimeout（函数（）{countdown（parseInt（mins）-1，false）；}，1000）；
}
}
jQuery（文档）.ready（函数（）{
如果（秒==0）{
document.getElementsByClassName（“meows”）[0].style.display=“无”；
//document.getElementById（'timer'）。innerHTML='EXPIRED！'；
返回；
}
)};         
}
勾选（）；
}
函数setCookie（cname、cvalue、exdays）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exdays*24*60*60*1000））；
var expires=“expires=“+d.togmString（）；
document.cookie=cname+“=”+cvalue+”；“+expires；
}
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；

对于（var i=0；i使用事件委派来注册与选择器匹配的所有当前和未来元素的事件


$('body').delegate('.meows', 'click', function() {
    console.log(this);
});


上述委托是针对
单击
事件的，但您可以绑定任何事件以满足您的需要


另一种方法是使用。我不会在这里详细介绍，因为上面的方法可以解决您的问题。
您需要使用委派事件。您可以复制一个工作的JSFIDLE吗？您尝试过调试您的尝试吗？
$（“.meows”）
find something？我从来没有做过JSFIDLE。除了在Chrome控制台中查找错误外，我真的不知道如何调试。然后是你。是的，我可能会尝试一下。

  if (typeof default_meow_area === 'undefined' && typeof options.container === 'undefined') {
    default_meow_area = $(window.document.createElement('div'))
        .attr({'id': ((new Date()).getTime()), 'class': 'meows'});
    $('body').prepend(default_meow_area);
  } 



(function ($, window) {
  'use strict';
  // Meow queue
  var default_meow_area,
    meows = {
      queue: {},
      add: function (meow) {
        this.queue[meow.timestamp] = meow;
      },
      get: function (timestamp) {
        return this.queue[timestamp];
      },
      remove: function (timestamp) {
        delete this.queue[timestamp];
      },
      size: function () {
        var timestamp,
          size = 0;
        for (timestamp in this.queue) {
          if (this.queue.hasOwnProperty(timestamp)) { size += 1; }
        }
        return size;
      }
    },
    // Meow constructor
    Meow = function (options) {
      var that = this;

      this.timestamp = new Date().getTime();  // used to identify this meow and timeout
      this.hovered = false;                   // whether mouse is over or not

      if (typeof default_meow_area === 'undefined'
          && typeof options.container === 'undefined') {
        default_meow_area = $(window.document.createElement('div'))
            .attr({'id': ((new Date()).getTime()), 'class': 'meows'});
        $('body').prepend(default_meow_area);
      }

      if (meows.size() <= 0) {
        if (typeof options.beforeCreateFirst === 'function') {
          options.beforeCreateFirst.call(that);
        }
      }

      if (typeof options.container === 'string') {
        this.container = $(options.container);
      } else {
        this.container = default_meow_area;
      }


      if (typeof options.title === 'string') {
        this.title = options.title;
      }

      if (typeof options.message === 'string') {
        this.message = options.message;
      } else if (options.message instanceof $) {
        if (options.message.is('input,textarea,select')) {
          this.message = options.message.val();
        } else {
          this.message = options.message.text();
        }

        if (typeof this.title === 'undefined' && typeof options.message.attr('title') === 'string') {
          this.title = options.message.attr('title');
        }
      }

      if (typeof options.icon === 'string') {
        this.icon = options.icon;
      }
      if (options.sticky) {
        this.duration = Infinity;
      } else {
        this.duration = options.duration || 7000;
      }

      // Call callback if it's defined (this = meow object)
      if (typeof options.beforeCreate === 'function') {
        options.beforeCreate.call(that);
      }

      // Add the meow to the meow area
      this.container.append($(window.document.createElement('div'))
        .attr('id', 'meow-' + this.timestamp.toString())
        .addClass('meow')
        .html($(window.document.createElement('div')).addClass('inner').html(this.message))
        .hide()

.fadeIn('400', function() {

        $('.meows').animate({'bottom':'0'},500);
 }));

      this.manifest = $('#meow-' + this.timestamp.toString());

      // Add title if it's defined
      if (typeof this.title === 'string') {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('p')).text(this.title)
        );
      }

      // Add icon if it's defined
      if (typeof that.icon === 'string') {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('div')).addClass('icon').html(
            $(window.document.createElement('img')).attr('src', this.icon)
          )
        );
      }

      // Add close button if the meow isn't uncloseable
      // TODO: this close button needs to be much prettier
      if (options.closeable !== false) {
        this.manifest.find('.inner').prepend(
          $(window.document.createElement('a'))
            .addClass('close')
            .html('&times;')
            .attr('href', '#close-meow-' + that.timestamp)
            .click(function (e) {
              e.preventDefault();
              that.destroy();
            })
        );
      }

      this.manifest.bind('mouseenter mouseleave', function (event) {
        if (event.type === 'mouseleave') {
          that.hovered = false;
          that.manifest.removeClass('hover');
          // Destroy the mow on mouseleave if it's timed out
          if (that.timestamp + that.duration <= new Date().getTime()) {
            that.destroy();
          }
        } else {
          that.hovered = true;
          that.manifest.addClass('hover');
        }
      });

      // Add a timeout if the duration isn't Infinity
      if (this.duration !== Infinity) {
        this.timeout = window.setTimeout(function () {
          // Make sure this meow hasn't already been destroyed
          if (typeof meows.get(that.timestamp) !== 'undefined') {
            // Call callback if it's defined (this = meow DOM element)
            if (typeof options.onTimeout === 'function') {
              options.onTimeout.call(that.manifest);
            }
            // Don't destroy if user is hovering over meow
            if (that.hovered !== true && typeof that === 'object') {
              that.destroy();
            }
          }
        }, that.duration);
      }

      this.destroy = function () {
        if (that.destroyed !== true) {
          // Call callback if it's defined (this = meow DOM element)
          if (typeof options.beforeDestroy === 'function') {
            options.beforeDestroy.call(that.manifest);
          }
          that.manifest.find('.inner').fadeTo(400, 0, function () {
            that.manifest.slideUp(function () {
              that.manifest.remove();
              that.destroyed = true;
              meows.remove(that.timestamp);
              if (typeof options.afterDestroy === 'function') {
                options.afterDestroy.call(null);
              }
              if (meows.size() <= 0) {
                if (default_meow_area instanceof $) {
                  default_meow_area.remove();
                  default_meow_area = undefined;
                }
                if (typeof options.afterDestroyLast === 'function') {
                  options.afterDestroyLast.call(null);
                }
              }
            });
          });
        }
      };
    };

  $.fn.meow = function (args) {
    var meow = new Meow(args);
    meows.add(meow);
    return meow;
  };
  $.meow = $.fn.meow;
}(jQuery, window));

/*!  countdown timer I added below  */

        var timeoutHandle;
        function countdown(minutes,stat) {
            var seconds = 60;
            var mins = minutes;
        if(getCookie("minutes")&&getCookie("seconds")&&stat)
        {
            var seconds = getCookie("seconds");
            var mins = getCookie("minutes");
        }
        function tick() {
            var counter = document.getElementById("timer");
            setCookie("minutes",mins,10)
            setCookie("seconds",seconds,10)
            var current_minutes = mins-1
            seconds--;
            counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
            //save the time in cookie
            if( seconds > 0 ) {
                timeoutHandle=setTimeout(tick, 1000);
            } else {
                if(mins > 1){  
                setTimeout(function () { countdown(parseInt(mins)-1,false); }, 1000);
                }
            }
            jQuery(document).ready(function () {
            if (seconds == 0 ) {
                document.getElementsByClassName("meows")[0].style.display = "none";
                //document.getElementById('timer').innerHTML = 'EXPIRED!';
                return;
            }
            )};         
        }
        tick();
    }
    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    window.onload = function startingTimer(){
        //countdown(prompt("Enter how many minutes you want to count down:"),true);
          countdown(1,true);
    }



$('body').delegate('.meows', 'click', function() {
    console.log(this);
});