Jquery - при нажатии не работает динамически загружаемый элемент - PullRequest
0 голосов
/ 01 октября 2018

У меня есть баннер cookie, который загружается в DOM через JS, и я пытаюсь добавить событие щелчка к кнопке закрытия на этом баннере.

jQuery(document).ready(function() {

    jQuery( 'body' ).on( 'click', '.ui-dialog-titlebar-close', function() {
        console.log('click');
    });

});

Может кто-нибудь сообщить, как я могу получитьэта функция щелчка для регистрации?Я не понимаю, почему приведенный выше код не будет работать.Он отлично работает, когда я меняю селектор на элемент, который загружается на страницу в первом экземпляре, и работает правильно, просто не нравится динамически загружаемый элемент?

EDIT:

Вот полный код:

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

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

Я бы скорректировал событие onclick с помощью setTimeout:

jQuery(document).ready(function() {
    setTimeout(function() {
       $('body').on( 'click', '.ui-dialog-titlebar-close', function() {
           console.log('click');
       });
    }, 10);
});
0 голосов
/ 01 октября 2018

Учитывая, что вы загружаете свой баннер, используя javascript:

tags.tiqcdn.com/utag/3m/offp-it-it/prod/utag.tagsOptOut.js

Затем вы должны прикрепить метод onclick после того, как javascript уже загружен и выполнен, вы можете сделать это, используя атрибут onloaded для сценария html.тег.

Например:

__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);
0 голосов
/ 01 октября 2018

удалил его из Jquery (документа). Уже не нужно, так как ваш контент загружается динамически после того, как страница уже загружена.

Вместо этого используйте следующее и поместите его перед </body>

jQuery(document).on( 'click', '.ui-dialog-titlebar-close', function() {
    console.log('click');
});
...