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+' />';

现在我们正试图在焦点上为边框上的红色着色。我们为元素做了一个focusout事件绑定，如下所示：

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

演示 - ＆gt;的 http://jsfiddle.net/nudwjo7c/

我认为您在render()中使用的代码为＆＃34;不良做法＆＃34; （没有冒犯的意思）。单独的数据和脚本，特别是当您使用需要在dataTable中工作的其他插件时。最好初始化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>一次，因此第一个输入在结束时初始化{{1时间，行数。巨大的开销。

Answer 2

我认为这很有效：

    $(document).on('focusout', '.varcode', function(event) {
         $(event.target).css("border","2px solid red");  
     });

Answer 3

可能是你的CSS被覆盖了。请检查你的风格。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="vCode" class="varcode" value="MEOWWWWwwww!!!" />

＆＃13;

在焦点事件上的Datatable元素上应用css

3 个答案: