Question

我的工作有问题，这在Firefox和谷歌浏览器上运行良好，但它在IE中不起作用。你能指出我弄错了吗？

scripts.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);

Answer 1

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

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

但.delete的标记是：

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

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

更相关的是，你需要确定你的代码的哪一部分正在破坏（如果你有一个我可以看到的代码的JS小提琴，但是因为你没有，你必须自己找出）。我会在alert之前调用$.confirm，然后再调用$.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;
    });
});

浏览器兼容性问题-NOt正在使用IE浏览器

1 个答案: