0

我通过手动将它们放入 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 调用时检索到的文本会显示两次.

4

1 回答 1

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& 。mouseleave无论如何，您都不能在此处使用.hover()，因为您需要使用委托。

来自 jQuery 的文档：

在 jQuery 1.8 中弃用，在 1.9 中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查 event.type 以确定事件是 mouseenter 还是 mouseleave。不要将“悬停”伪事件名称与接受一两个函数的 .hover() 方法混淆。

于 2013-09-12T21:29:24.387 回答