Question

我正在尝试获取当前焦点输入的父元素的类。所有输入都有一类.edit（JEditable绑定）。父类声明在数据库更新中使用了哪个控制器，字段和id（我正在使用带有JQuery Ajax的Codeigniter）。

这是我目前的代码：

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';  
}

但是这总是评估为假。

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

谢谢！

Answer 1

这对我有用，你在寻找不同的东西吗？

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
</script>

</head>
<body>

<form class="pelement">
    <input type="text" class="editable" value="some value here" />
</form>


<script language="javascript">
    $('.editable').focus(function(){
        console.log("parent: %s", $(this).parent().attr('class'));
    });
</script>
</body>
</html>

Answer 2

问题是你只在.focus()处理程序中声明attributes （因此它不会在更高的click范围内提供。< / p>

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

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">'
       });
    });
}

此外，除非class对其他原因有用，例如：样式...考虑专门针对数据使用data- attribute，而不是尝试在此处查找/应用CSS类的浏览器。

Answer 3

点击你的#container会从先前关注的任何输入中窃取焦点，因此你必须以某种方式存储最后关注的.edit输入：

var basepath, lastFocus;

$(document).ready(function() {
    $(".edit").focus(function(){ lastFocus = $(this); });

    basepath = "/mm/";
    jedit();
});


function jedit() {
    $('#container').live({
    click: function() {
        /* EDIT: In case lastFocus is null: */

       if(lastFocus == null) return;

        var attributes = lastFocus.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">'
        });

        }
    });
}

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

3 个答案: