Question

我有一个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()的对话框中的元素时，我收到错误。

未捕获TypeError：对象＃没有方法'更新

HTML code：

<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="../Styles\sctrls/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');
            }
        }
    });
}

你知道为什么会这样吗？

谢谢！

Answer 1

修复热门代码：

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 ()
      {}
    }
  }
}

你从未在范围之外定义任何东西。

Answer 2

当创建一个jQuery对话框时，html会被移出正文！这可能是你的问题源于......

Answer 3

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

因为ctrl的初始化代码位于旁边，所以它第二次被执行，因此丢失了数据。

Answer 4

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

Jquery有一个名为e.preventDefault（）的方法来完成这个技巧，链接的默认操作是转到页面顶部，e.preventDefault（）页面将保持原样。

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

$(".SomeButtonOrLinkOrDomObjectId").click(function (e) {

    e.preventDefault(); //this does the trick.

    //then, your code...

});

希望它有所帮助。

再见。

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

4 个答案: