对象在 Dialog.open 后丢失所有函数

>我有一个Javascript对象（非常简化）看起来像这样

if('undefined' !== typeof(listCtrls)){ for (ctrlName in listCtrls) {
var ctrl = listCtrls[ctrlName];
ctrl.Initialize = function() {
    //Save a reference to the 'tbody' element
    this.tbody = $("#"+this.id+"_tbody");
    this.dataFetched = false;
}
ctrl.Update = function(command){
    //Go and fetch some data
    $.post(url, function(ssResponse){ ... }
    this.tbody = "fill with AJAX data";
}
ctrls.SomeMoreFunctionsAsWell() {}
}});

正如你在函数Initialize()中看到的，它有一个对HTML元素的引用。一切都运行良好，直到我将引用的 HTML 元素放在 JQuery 对话框中。

对话框打开后，ctrl将失去所有功能。我不明白为什么！如果在调用 Dialog.Destroy() 时出现问题是有道理的，但此错误在打开对话框后直接发生。

现在，我在Dialog.Open()期间没有收到常规的javascript错误。相反，当我单击对话框中调用ctrl.Update()的元素时，我会收到错误。

未捕获的类型错误：对象 # 没有方法"更新"

网页代码：

<div id="dialog_Substitute" style="display:none;" title="test">
    <div><span class="ui-icon ui-icon-info" style="style"></span>
<table style="width:100%" id="substitutelist_table">
<thead id="substitutelist_thead"><tr><th style="cursor: pointer; ">Name</th><th style="cursor: pointer; ">Valid from</th><th style="cursor: pointer; ">Valid through</th><th style="cursor: pointer; ">Incl. Authorities</th><th style="cursor: pointer; "></th></tr></thead>
<tbody class="tbodydata" id="substitutelist_tbody">
<tr style="background-color:#F2F2F2;"><td class="left" style="">Lager, Patrik</td><td class="left" style="">2011-04-15</td><td class="left" style="">2011-07-01</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-04-15'; deleteItem(a,b);};return kill(event);" style=""><img src="../Stylessctrls/delete_16.png" alt="Ta bort"></td></tr>
<tr style=""><td class="left" style="">Svensson, Marie</td><td class="left" style="">2011-04-15</td><td class="left" style="">2011-05-12</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-04-15'; deleteItem(a,b);};return kill(event);" style=""><img src="../Styles/sctrls/delete_16.png" alt="Ta bort"></td></tr>
<tr style="background-color:#F2F2F2;"><td class="left" style="">Lind, Linda</td><td class="left" style="">2011-02-05</td><td class="left" style="">2011-02-27</td><td class="left" style=""></td><td class="action left" onclick="if(¤7¤==true) {var a=¤6¤; var b='2011-02-05'; deleteItem(a,b);};return kill(event);" style=""><img     src="../Styles/sctrls/delete_16.png" alt="Ta bort"></td></tr>
</tbody></table>
    </div>

打开对话框的 JS 代码：

function dialogSubstitutes(user_id, user_name)
{
    //list ID=substitutelist
    //dialog ID =dialog_Substitute
    //Reset form (it might have been used before)
    //$("#frm_newsubstitute")[0].reset();
    //Fetch substitutes for this user and populate the List
    listCtrls["substitutelist"].dataSrcParams.user_id = user_id;
    listCtrls["substitutelist"].Update(-1);

    $("#dialog_Substitute").dialog({
        resizable: false,
        width: 650,
        modal: true,
        overlay: {
            backgroundColor: 'black',
            opacity: 0.5
        },
        buttons: {
            'OK': function() {
                $("#dialog_Substitute").dialog('close');
                //$("#dialog_Substitute").dialog('destroy');
            }
        }
    });
}

你知道为什么会这样吗？

谢谢！

修复顶部代码：

if ('undefined' !== typeof (listCtrls))
{
  for (ctrlName in listCtrls)
  {
    listCtrls[ctrlName].Initialize = function ()
    {
      //Save a reference to the 'tbody' element
      this.tbody = $("#" + this.id + "_tbody");
      this.dataFetched = false;
    }
    listCtrls[ctrlName].Update = function (command)
    {
      //Go and fetch some data
      $.post(url, function (ssResponse)
      {...
      }
      this.tbody = "fill with AJAX data";
      }
      listCtrls[ctrlName].SomeMoreFunctionsAsWell = function ()
      {}
    }
  }
}

你从来没有定义过范围之外的任何内容。

当创建 jQuery 对话框时，html 会将其移出正文！这可能是您的问题的根源...

事实证明（喜欢这个表达式），当打开JQuery.Dialog()时，它不仅会移动对话框的内部HTML代码，还会执行任何内联JavaScript代码。

由于 ctrl 的初始值设定项代码位于其旁边，因此它被执行了第二次，因此丢失了数据。

我找不到你在哪里调用DialogSubstitutes方法。但是我用一个简单的行解决了同样的问题，如果你用链接或按钮调用一个jquery函数，那个链接或按钮会继续做他的DOM工作，所以你必须避免这项工作，比如停止它。

Jquery有一个名为e.preventDefault（）的方法，可以做到这一点，链接的默认操作是转到页面顶部，e.preventDefault（）页面将停留在原地。

但是您必须以这种方式更改调用函数的方式：

$(".SomeButtonOrLinkOrDomObjectId").click(function (e) {
    e.preventDefault(); //this does the trick.
    //then, your code...
});

希望对您有所帮助。

再见。

相关内容

最新更新

热门标签：