Question

我有一张包含许多记录的表格。为了提高性能，我使用了jquery事件委托。

<div id="table">
  <div class="dosomething" uid="1">first</div>
  <div class="dosomething" uid="2">second</div>
  ..etc
</div>  

$('#table').on('click', '.dosomething', function() {
  var htmlMsg = 'foo bar';
  var uid = $(this).attr('uid');
  // Now call confirm Dialog
  callDialog(htmlMsg, uid, changeCrt);
});

function callDialog(htmlMsg, uid, callback) {
  $('#confirm').dialog({
   resizable: false,
   autoOpen: false,
   modal: true,
   buttons:
   {
      Yes: function ()
      {
          $(this).dialog("close");
          callback(uid);
      },
      No: function ()
      {
          $(this).dialog("close");
      }
   }
}).html(htmlMsg).dialog('open');
}

function changeCrt(uid) {
   do something
}

为了能够在大多数情况下使用我想传递通过html属性动态传递的回调名称。我试过这种方式

<div id="table">
      <div class="dosomething" uid="1" act="changeCrt">first</div>
      <div class="dosomething" uid="2" act="changeCrt">second</div>
      ..etc
</div>

$('#table').on('click', '.dosomething', function() {
    var htmlMsg = 'foo bar';
    var uid = $(this).attr('uid');
    var act = $(this).attr('act');
    // Now call confirm Dialog
    callDialog(htmlMsg, uid, act);
});

但我从控制台收到此错误

TypeError：回调不是函数。

我该如何解决？感谢

Answer 1

您需要使用方括号表示法调用函数，使用您定义函数的作用域，在本例中为window：

Yes: function ()
{
    $(this).dialog("close");
    window[callback](uid);
},

或者，如果您不想污染窗口的命名空间，请创建一个库对象以保留您的回调：

var library = {
    changeCrt: function(uid) {
        // do something
    }
}

并使用您的库作为范围：

Yes: function ()
{
    $(this).dialog("close");
    library[callback](uid);
},

Answer 2

这可能是一个很好的解决方案吗？

  var act = $(this).attr('act');

  switch (act)
  {
     case "changeCrt":
        callDialog(htmlMsg, uid, changeCrt);
     break;

  }

感谢您的建议。

Jquery - 从事件委托中的html属性获取回调名称

2 个答案: