jquery modal dialog .load 删除父表的css答案

【问题标题】：jquery modal dialog .load removes table css of parentjquery modal dialog .load 删除父表的css
【发布时间】：2011-03-02 22:02:34
【问题描述】：

我在这里遇到了一个奇怪的情况。我正在从数据表中启动对话框（用于编辑记录）。但是当我启动模态时，我在表格上的行条带化（通过 js 应用）消失了，并且在 IE 中对编辑的额外点击会产生一个高度不正确的模态。

现在，这工作正常，但是当我一直在调整我的功能以做我需要的事情时，有些东西破坏了它。我在同一页面上也有一个“添加”链接，它不会杀死表 css。下面我有我的条带化逻辑和相关的对话框代码。如果您需要查看更多信息，请告诉我。我错过了什么？

<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".striped tr").mouseover(function() {
        $(this).addClass("highlight");
    });
    $(".striped tr").mouseout(function() {
        $(this).removeClass("highlight");
    });
    $(".striped tr").click(function() {
        $(this).toggleClass("selected");
    });
    $(".striped tr:nth-child(odd)").addClass("odd");
});

$(function() {
    // Dialog   
    //alert($(this).form.val());
    var rep_id = $("#rep_id"),
        name = $("#name"),
        num_name = $("#num_name"),
        external = $("#external"),
        allFields = $([]).add(rep_id).add(name).add(external).add(num_name),
        tips = $(".validateTips");

    function checkLengthEdit(o, n, min, max, msg) {
        //alert(o.length);
        if (o.length > max || o.length < min) {
            o.addClass("ui-state-error");
            updateTips(msg);
            alert("failed validation");
            return false;
        } else {
            alert("passed validation");
            return true;
        }
    }

    function checkLength(o, n, min, max, msg) {
        if (o.length > max || o.length < min) {
            o.addClass("ui-state-error");
            updateTips(msg);
            alert("failed validation");
            return false;
        } else {
            alert("passed validation");
            return true;
        }

    }

    function updateTips(t) {
        tips.text(t).addClass("ui-state-error");
    }

    function removeTips(t) {
        tips.text(t).removeClass("ui-state-error");
    }
    $('#edit_number').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        buttons: {
            "Update Number": function() {
                var bValid = true;
                allFields.removeClass('ui-state-error');
                if (bValid) {
                    alert("valid");
                    //document.edit_number_form.submit();
                }
            },
            "Cancel": function() {
                allFields.removeClass('ui-state-error');
                removeTips('');
                $(this).dialog("close");
            }
        }
    });
    $('.edit_number_link').bind('click', function() {
        var edit_path = $(this).attr("href");
        $("#edit_number").load(edit_path).dialog('open');
        return false;
    });

});

任何帮助将不胜感激。

更新：已发布更新代码。看起来它与.load有关。当我注释掉 .load 时，会弹出对话框并且 css 保留在表中。仍然希望修复它...

【问题讨论】：

我知道我不应该在一天结束的时候发布这个。撞？
这行$("#edit_number").load(edit_path).dialog('open');的意图是什么？
它打开对话框并加载edit_path中引用的外部页面。

标签： jquery jquery-ui dialog modal-dialog

【解决方案1】：

看起来load() 正在替换元素并清除添加类的事件处理程序。来自jQuery API reference：

.load() 将匹配元素的 HTML 内容设置为返回的数据。

您需要将事件重新绑定到该元素。

【讨论】：

我不确定我知道该怎么做。你能帮我吗？我要重新绑定我的剥离吗？
您可能应该取消选中我的答案作为解决方案，直到我们真正让它工作:)
不想取消选中，因为我 99% 确定您的答案是正确的，即使我不知道如何实施。但你是老板 :)
既然您开始工作，我不介意将我的答案作为解决方案进行检查；)

【解决方案2】：

不确定这里的协议：我无法解决这个问题，但通过使用 json 填充我的编辑表单而不是从外部文件加载它来解决它。

@sonny，谢谢你的帮助。

【讨论】：