jquery - 在焦点事件的数据表元素上应用 css

Question

我们有一个数据表列呈现如下:

"render": function (data, type, row, meta){

var dropdownVarCodes = {
   source: varCodes
};

$(".varcode").autocomplete(dropdownVarCodes);
if(data == undefined) {
    data = '';
}
prop = '';
if(row.timesheetStatus == "COMPLETE"){
    prop = 'disabled="disabled"';
}
return '<input type="text" name="vCode" class="varcode" value="'+data+'" '+prop+' />';

现在我们正在尝试将焦点设置为红色边框。我们为元素做了一个焦点事件绑定(bind)，如下所示:

jQuery(document).ready(function() {
....
.........

$(document).on('focusout', '.varcode', function(e) {
   alert($('input.varcode').attr('name'));  // we get this correctly as 'vCode'
   var elem = e.target;   // elem = input.varcode, e = r.Event {type: "focusout", ........
   $(elem).css("border","2px solid red");   //elem = input.varcode
});

.....
........

});

我们也得到了正确的元素，通过调试可以看出(注释语句)。我们仍然没有在焦点移出时获得输入元素的彩色边框。有什么想法或指示吗？

注意:如果我们在文档的其他位置创建了输入元素，则相同的代码可以工作。

Answer 1

也许您使任务过于复杂化了？这是一个使用链接的工作示例:

var table = $('#example').DataTable({
  drawCallback: function() {
    $('#example input.varCode').autocomplete({
      source: tags
    }).focusout(function() {
      $(this).css('border', '2px solid red')
    }) 
  }  
})

演示 -> http://jsfiddle.net/nudwjo7c/

我考虑您在 render() 中使用的代码作为“不好的做法”(无意冒犯)。将数据和脚本分开，特别是当您使用需要在数据表内工作的其他插件时。最好在 drawCallback 中初始化它们或initComplete .

<小时/>

澄清:您在 render() 中唯一应该做的事情是

render: function (data, type, row, meta){
  var prop = row.timesheetStatus == "COMPLETE" ? 'disabled="disabled"' : '';
  return '<input type="text" name="vCode" class="varcode" value="' + data + '" ' + prop + ' />';
}

你实际上初始化了autocomplete() 1+2+3+4+5等次，每次render()一次每<input> ，所以第一个输入在末尾初始化 n次，行数。巨大的开销。