浏览器兼容性问题 - 无法在 IE 上运行

Browser compatability issue -NOt working on IE

本文关键字：IE 运行 兼容性 问题 浏览器      更新时间：2023-09-26

我的工作有一个问题，在Firefox和Google Chrome上效果很好，但在IE中不起作用。你能指出我哪里做错了吗？

脚本.js 

$(document).ready(function () {
    $('.delete').click(function () {
        var contentId = $(this).attr('contentid');
        $.confirm({
            'title': 'Delete Confirmation',
            'message': 'Are you sure you want to delete this record?',
            'buttons': {
                'Yes': {
                    'class': 'blue',
                    'action': function () {
                        DoDelete(contentId);
                    }
                },
                'No': {
                    'class': 'orange',
                    'action': function () {}
                    // Nothing to do in this case. You can as well omit the action property.
                },
                'close': {
                    'action': function () {}
                    // Nothing to do in this case. You can as well omit the action property.
                }
            }
        });
    });
});

确认脚本以生成 HTML 标记

(function ($) {
    $.confirm = function (params) {
        if ($('#confirmOverlay').length) {
            return false;
        }
        var buttonHTML = '';
        $.each(params.buttons, function (name, obj) {
            buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '<span></span></a>';
            if (!obj.action) {
                obj.action = function () {};
            }
        });
        var markup = [
            '<div id="confirmOverlay">',
            '<div id="confirmBox">',
            '<div id="header">',
            '<div id ="title">',
            params.title,
            '</div></div>',
            '<div id ="textbox">',
            '<p>',
            params.message,
            '</p></div>',
            '<div id="confirmButtons">',
            buttonHTML,
            '</div></div></div>'
        ].join('');
        $(markup).hide().appendTo('body').fadeIn();
        var buttons = $('#confirmBox .button'),
            i = 0;
        $.each(params.buttons, function (name, obj) {
            buttons.eq(i++).click(function () {
                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }
    $.confirm.hide = function () {
        $('#confirmOverlay').fadeOut(function () {
            $(this).remove();
        });
    }
})(jQuery);

首先，$('.delete')处理程序的第一行是：

var contentId = $(this).attr('contentid');

但您的.delete标记是：

<div class="delete"></div>

（请注意缺少contentId属性）。 幸运的是（？）您的代码实际上似乎并没有使用contentId ：-）

更相关的是，您需要确定代码的哪一部分正在损坏（如果您有代码的JS小提琴，我可以查看，但是由于您没有，因此您必须自己找出）。 我会在调用$.confirm之前放一个alert，然后在$.confirm中再次放置，以确保代码甚至到达您的插件（如果没有，那就是您的问题）。

如果是，下一个要问的问题是"你的标记是否被添加，但没有显示，或者它根本没有被添加"。 警报或 IE 开发人员工具应该允许您检查 DOM 并找出是否添加了标记;如果没有，那就是你的问题。 如果它正在添加，但没有显示，那么您的fadeIn出了问题，这就是您的问题。

最后，有一种更简单的方法可以挂接按钮事件;而不是：

var buttons = $('#confirmBox .button'),
        i = 0;
$.each(params.buttons, function (name, obj) {
    buttons.eq(i++).click(function () {
        obj.action();
        $.confirm.hide();
        return false;
    });
});

你可以做：

$('#confirmBox .button').each(function(button) {
    $(button).click(function () {
        params.buttons[$(this).text()].action();
        $.confirm.hide();
        return false;
    });
});
相关文章：