Question

我正在运行一些测试弹出窗口，手动将它们放入HTML文件中，而我必须关闭它们的JS函数运行正常。但是，当我动态添加弹出窗口时，关闭功能会中断，无法删除它们。

这是JS函数，它告诉.popup类中的所有弹出窗口在单击.close按钮时关闭。该代码还包含一个悬停功能，当用户将鼠标悬停在关闭按钮上时，该功能可以将图像切换出来，也就是打破了。

$('.popup').on('click', '.close', function() {
    $(this).closest('.popup').remove(); //or .hide() if you just want to hide the popup
});

$('img.close').hover(function () {
    this.src = '/engine/themes/img/popup.close.hover.png';
}, function () {
    this.src = '/engine/themes/img/popup.close.idle.png';
});

这是我将其添加到DOM

的方法

var popupID = 'popup1';
// Create popup div
var popupHTML = '<div id="'+popupID+'" class="popup">'+
    '<div class="toolbar"><div id="title">Please Wait</div>'+
    '<img class="close" src="/engine/themes/img/popup.close.idle.png" alt="Close" title="Close" />'+
    '</div><p class="text">Loading...<p></div>';

$('body').append(popupHTML);

$.ajax({
    url: pageURL,
    cache: false,
    success: function(data) {
        var matches, pageTitle;

        matches = data.match(/<title>(.*?)<\/title>/);
        pageTitle = 'MERKD.COM';
        if ( typeof matches !== 'undefined' && matches != null ) {
            pageTitle = matches[1];
        }

        $('#'+popupID).html(strReplace('Loading...', data, $('#'+popupID).html()));
        $('#'+popupID).html(strReplace('Please Wait', pageTitle, $('#'+popupID).html()));
    } // end success call
}); // end ajax function

注意在底部我使用手动编写的替换方法而不是仅使用$('#popup1 p').html('some text');，因为当我这样做时，它会显示data中检索到的文本两次，有人知道为什么会这样吗？

当我动态添加弹出窗口时，我迷失了为什么停止工作，但我肯定只是忽略了一些东西，因为我也无法弄清楚为什么data中检索到的文本会被显示两次当我进行常规.html()或.text() jQuery调用时。

Answer 1

试试这个：

var hovered;
$(document).on('mouseenter','img.close',function () {
    hovered = this;
    this.src = '/engine/themes/img/popup.close.hover.png';
});
$(document).on('mouseleave','img.close',function () {
    hovered.src = '/engine/themes/img/popup.close.idle.png';
});

事件处理程序仅绑定到选定的元素，并且在加载代码时它们必须已存在于页面上。否则，为了纠正这个问题，您可以使用事件委派并将事件处理程序添加到已经存在的“某事”中，document始终是一张安全卡。

详细了解.on()

修改

我更正了我的代码，实际上我意识到.on()和hover不能一起工作，所以我适应了mouseenter＆amp;而是mouseleave。无论如何，你都不能在这里使用.hover()，因为你需要使用委托。

来自jQuery的文档：

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加单个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆，后者接受一个或两个函数。

动态添加后，Javascript Popup不会关闭

1 个答案: