javascript - 获取当前输入的父类 - JEditable/JQuery/Javascript

Question

我正在尝试获取当前聚焦输入的父元素的类。所有输入都有一个 .edit 类(JEditable 绑定(bind)到)。父类声明数据库更新中使用哪些 Controller 、字段和 id(我使用 Codeigniter 和 JQuery Ajax)。

这是我当前的代码:

var basepath;

 $(document).ready(function() {
    basepath = "/mm/";
    jedit();
});

function jedit() {
    $('#container').live({
    click: function() {

        $('.edit').focus(function() {
          var attributes    = $(this).closest('tr').attr('class');
        });

        var splitResult = attributes.split("-");
        var controller  = splitResult[0];
        var field       = splitResult[1];
        var id          = splitResult[2];

        $('.edit').editable(basepath+controller+'/edit/'+field+'/'+id,{
        indicator:'<img src="'+basepath+'images/throbber.gif">'
        });

        }
    });
}

目前我在 Firebug 控制台中得到attributes is not Defined。我认为这是因为在单击要编辑的文本之前，输入不存在(因此没有焦点)。我已经尝试了 if else ，大致如下:

if($('.edit input').length != 0) {
  var attributes    = $('.edit').closest('tr').attr('class');
} else {
  var attributes    = 'some nul thing here';  
}

但这总是评估为 false。

任何有关如何获取事件 .edit 类的父类的想法或建议，我们将不胜感激。

谢谢!

Answer 1

问题是您在 .focus() 中声明了 attributes 仅处理程序(因此它在更高的点击范围内不可用。

相反，它应该在您想要使用它的范围内定义，在该事件处理程序中设置它，如下所示:

var attributes;
$('.edit').focus(function() {
   attributes = $(this).closest('tr').attr('class');
});

但是，在您的情况下，您将希望在焦点发生时使用此数据，总体看起来像这样:

function jedit() {
    $('#container').delegate('.edit', 'focus', function() {  
       var result = $(this).closest('tr').attr('class').split("-"),
           controller  = result[0],
           field       = result[1],
           id          = result[2];
       $(this).editable(basepath+controller+'/edit/'+field+'/'+id,{
           indicator:'<img src="'+basepath+'images/throbber.gif">'
       });
    });
}

此外，顺便说一句，除非类因其他原因有用，例如样式...考虑使用 data- attribute专门用于数据，而不是浏览器尝试在此处查找/应用 CSS 类。