Javascript Jquery-on-click不处理动态加载的元素
我有一个通过JS加载到DOM中的cookie横幅,我正在尝试向该横幅上的close按钮添加一个click事件Javascript Jquery-on-click不处理动态加载的元素,javascript,jquery,function,onclick,Javascript,Jquery,Function,Onclick,我有一个通过JS加载到DOM中的cookie横幅,我正在尝试向该横幅上的close按钮添加一个click事件 jQuery(document).ready(function() { jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() { console.log('click'); }); }); 谁能告诉我如何获得这个点击功能注册?我不明白为什么上面的代码不起作用。当我将
jQuery(document).ready(function() {
jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() {
console.log('click');
});
});
谁能告诉我如何获得这个点击功能注册?我不明白为什么上面的代码不起作用。当我将选择器更改为在第一个实例中加载到页面上的元素时,它工作正常,只是不喜欢动态加载的元素
编辑:
以下是完整的代码:
function setBannerCookie(){
if(typeof tealiumBanner.setBannerCookie === 'function'){
tealiumBanner.setBannerCookie();
}
}
function setBannerCookie() {
jQuery.cookie ("mmmBanner", "accepted", {expires:365, path:"/"});
jQuery("#cookieBox").animate({height:"toggle"}, 500);
var optOutMultiCookie = jQuery.cookie("OPTOUTMULTI");
var cookieArray = optOutMultiCookie.split('|');
for(var i=0;i<cookieArray.length;i++){
var itemArray = cookieArray[i].split(':');
newItem = itemArray[0] + ":0";
cookieArray[i] = newItem;
}
cd = new Date();
cd.setDate(cd.getDate() + 90);
document.cookie = 'OPTOUTMULTI=' + cookieArray.join("|") + ';path=/;domain=' + utag.cfg.domain + ';expires=' + cd.toGMTString() + ";";
}
jQuery(document).ready(function() {
if (jQuery.cookie("mmmBanner") == undefined) {
jQuery.cookie ("mmmBanner", "waiting", {expires:365, path:"/"});
}
jQuery("#mmmCorpCookie").click(function (e) {
e.preventDefault();
if (typeof __tealiumMo2Div == 'undefined') {__tealiumMo2Div = document.createElement('SCRIPT');__tealiumMo2Div.type = 'text/javascript';__tealiumMo2Div.src = '//tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js?cb='+Math.random();document.getElementsByTagName('head')[0].appendChild(__tealiumMo2Div);}else{__tealium.load();}
});
if (jQuery.cookie("mmmBanner") == undefined) {
jQuery.cookie ("mmmBanner", "waiting", {expires:365, path:"/"});
}
if (jQuery.cookie("mmmBanner") === "waiting") {
(function () {if (typeof __tealiumMo2Div == 'undefined') {__tealiumMo2Div = document.createElement('SCRIPT');__tealiumMo2Div.type = 'text/javascript';__tealiumMo2Div.src = '//tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js?_cb='+Math.random();document.getElementsByTagName('head')[0].appendChild(__tealiumMo2Div);}else{__tealium.load();}})();
}
});
/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2013 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}
function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}
function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}
function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}
function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}
var config = $.cookie = function (key, value, options) {
// Write
if (value !== undefined && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setTime(+t + days * 864e+5);
}
return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Read
var result = key ? undefined : {};
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
var cookies = document.cookie ? document.cookie.split('; ') : [];
for (var i = 0, l = cookies.length; i < l; i++) {
var parts = cookies[i].split('=');
var name = decode(parts.shift());
var cookie = parts.join('=');
if (key && key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}
// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
if ($.cookie(key) === undefined) {
return false;
}
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};
}));
jQuery(document).ready(function() {
jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() {
console.log('click');
});
});
函数setBannerCookie(){
if(tealiumBanner.setBannerCookie的类型=='function'){
tealiumBanner.setBannerCookie();
}
}
函数setBannerCookie(){
jQuery.cookie(“mmmBanner”,“accepted”,{expires:365,路径:“/”});
jQuery(“#cookieBox”).animate({height:“toggle”},500);
var optoutmulticokie=jQuery.cookie(“OPTOUTMULTI”);
var cookieArray=optoutmulticokie.split(“|”);
对于(var i=0;i将其从
Jquery(document).ready不需要它,因为您的内容是在页面已经加载之后动态加载的
相反,请使用以下命令并将其放在
我将通过使用setTimeout临时化onclick事件:
jQuery(document).ready(function() {
setTimeout(function() {
$('body').on( 'click', '.ui-dialog-titlebar-close', function() {
console.log('click');
});
}, 10);
});
考虑到您正在使用javascript加载横幅:
tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js
然后,您必须在已经加载并执行javascript之后附加onclick方法,您可以使用script html标记的onload属性来实现这一点
例如:
__tealiumMo2Div = document.createElement('SCRIPT');
__tealiumMo2Div.type = 'text/javascript';
__tealiumMo2Div.src = '//tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js?_cb='+Math.random();
__tealiumMo2Div.onload = function()
{
jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() {
console.log('click');
});
};
document.getElementsByTagName('head')[0].appendChild(__tealiumMo2Div);
您需要在将动态创建的控件附加到页面后立即注册此事件。请确保在注册之前将.ui对话框标题栏关闭
添加到页面中单击event@ArunKumar否,使用('click')上的
适用于动态添加的元素正文应该在准备文档的事件处理程序启动之前呈现,因此,将事件处理程序附加到正文应该是可以的。这里还有其他一些问题。你能发布HTML以便我们可以交叉检查拼写、类属性等内容吗?请也提供HTML。你的javascript代码工作正常。您可能有无效的html或使用不同的类。谢谢,但不幸的是,单击功能仍然无法启动。jQuery('document')
应该是jQuery(document)
。但请注意,仅用于测试目的。您希望在最近的静态元素上执行事件委派。@MarkBaijens thanx指出错误,我已更新了我的答案。希望这能起作用。谢谢,删除了否决票。但是我不完全同意将其保留在就绪函数之外,因为通常(在生产中)您不想使用文档
进行授权。在我看来,这是一种非常糟糕的做法,您永远不知道加载横幅需要多长时间。我们应该始终避免设置超时,除非我们没有任何其他解决方案。
__tealiumMo2Div = document.createElement('SCRIPT');
__tealiumMo2Div.type = 'text/javascript';
__tealiumMo2Div.src = '//tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js?_cb='+Math.random();
__tealiumMo2Div.onload = function()
{
jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() {
console.log('click');
});
};
document.getElementsByTagName('head')[0].appendChild(__tealiumMo2Div);