Question

我有一个带按钮的jQuery UI对话框。只要按下按钮，按钮“OnTMP”就应该将元素的状态设置为“on”。状态的改变是AJAX请求的数据库更新。我使用mousedown和mouseup实现了此功能。但是，当我按下按钮时，一切似乎工作正常，但一旦我发布它，我得到控制台输出

TypeError：click is undefined jquery-ui.js：10519：5


对话框＆LT; ._createButtons / HTTP：//iis.local/mysite/js/jquery-ui.js：10519：5

jQuery.event.dispatch http://iis.local/mysite/js/jquery-1.11.2.js:4664:15

jQuery.event.add / elemData.handle http://iis.local/mysite/js/jquery-1.11.2.js:4333:6

（我包含了调试jQuery脚本文件，而不是缩小版本）

小部件

$('#pop-up' + id).dialog({
  position: { my: "left top", at: "left bottom", of: '#' + id},
  close: function () {
    $('#pop-up' + id).dialog('destroy');
    $('#pop-up' + id).remove();
  },
  height: 50,
  width: 150
  });
  var buttons = [
    {
      text: "On",
      click: function () {
        changeGUIElementState(id, type, "on", false, true);
      }
    },
    {
      text: "Off",
      click: function () {
        changeGUIElementState(bmk, type, "off", false, true);
      }
    },
    {
      text: "OnTMP",
      mousedown: function () {
        changeGUIElementState(bmk, type, "on", true, true);
      },
      mouseup: function () {
        changeGUIElementState(bmk, type, "off", true, true);
      }
    }
  ];
  $("#pop-up" + id).dialog("option", "buttons", buttons);

函数changeGUIElementState

function changeGUIElementState(id, type, newState, tmp, saveToDB) {
  var obj = {};
  obj.id = id;
  obj.type = type;
  var jsonData = JSON.stringify(obj);
  console.log("before ajax");
  // get all the attributes of the elment from the database
  $.ajax({
    type: 'POST',
    url: '../db/GetElementFromDB.ashx',
    data: jsonData,
    dataType: 'json',
    contentType: 'application/json; charset-utf-8'
  })
  .done(function (response) {
    console.log("ajax done");
    response.state = newState;
    if (saveToDB) {
      notifyDB(id, type, response);
    }
    // redraw the element
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.log("request error in changeGUIElementState()");
    console.log(textStatus);
    console.log(errorThrown);
  });
}

因此，当我按下并释放按钮时，控制台输出是

  在ajax之前


ajax完成
     在ajax之前


TypeError：click is undefined jquery-ui.js：10519：5

ajax完成

元素被正确重绘（状态的改变显然是颜色的变化），这就是为什么我没有先看控制台输出。

关于这个问题的任何想法？

Answer 1

＆＃34;点击未定义＆＃34;消息正在发生，因为您的＆＃34; OnTMP＆＃34;按钮没有单击事件处理程序。 jQueryUI要求您为每个按钮声明一个单击处理程序，即使在您的情况下，您也不需要它。无论如何它会假设它在那里并尝试调用它。

要绕过它，只需将一个带有空函数的单击处理程序添加到＆＃34; OnTMP＆＃34;的定义中。按钮：

{
  text: "OnTMP",
  mousedown: function () {
    changeGUIElementState(bmk, type, "on", true, true);
  },
  mouseup: function () {
    changeGUIElementState(bmk, type, "off", true, true);
  },
  click: function () { } //empty click handler
}

jQuery AJAX请求TypeError：click未定

1 个答案: