Question

我在这里看起来很奇怪。我正在从数据表中启动对话框（用于编辑记录）。但是当我启动模态时，表格上的行条带化（通过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保留在表中。仍然希望修复它......

Answer 1

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

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

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

Answer 2

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

@sonny，谢谢你的帮助。

jquery模式对话框.load删除父表的css

2 个答案: