如何隱藏動態生成的div

Question

有人可以告訴我如何刪除這個div嗎？

我試過了我能找到的所有東西。一些我試過的事情是：

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

這樣的：

jQuery(document).ready(function ($) { 
      if (seconds == 0) { 
       $('.meows').css('display','none'); 
       return; 
      } 
}); 

這樣的：

document.onreadystatechange = function() { 
    if (document.readyState == "complete") { 
    document.getElementsByClassName("meows")[0].style.display = "none"; 
    } 
} 

這樣的：

document.addEventListener('DOMContentLoaded', function() { 
      if (seconds == 0) { 
       document.getElementsByClassName("meows")[0].style.display = "none"; 
       //document.getElementById('timer').innerHTML = 'EXPIRED!'; 
       return; 
      } 
}); 

多。其中大部分實際上使錯誤消失。我得到的錯誤是：

TypeError: Cannot read property 'style' of undefined 

它是什麼是一個彈出通知。它彈出正文標籤下。所以它並不是一直存在的。

這裏就是彈出被創建：

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); 
    } 

Answer 1

使用事件代表團爲與您的選擇器匹配的所有現在和未來元素註冊事件。你的情況，你可以使用類似這樣

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

上述代表團是click事件，但可以綁定任何事件來完成您的需求。

另一種方法是使用MutationObserver。我不會在這裏詳細介紹它，因爲上述方法可以解決您的問題。