有人可以告诉我如何删除这个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('×')
.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);
}
答案 0 :(得分：-1)
使用事件委派为所有与您的选择器匹配的当前和未来元素注册事件。在你的情况下，你可以使用这样的东西
$('body').delegate('.meows', 'click', function() {
console.log(this);
});
上述授权适用于click事件，但您可以绑定任何事件以满足您的需求。
另一种方法是使用MutationObserver。我不会在这里详细说明，因为上述方法可以解决您的问题。