Question

我知道它重复但来自SO的解决方案对我没有帮助。

所以

<input id="hereMyDropDownValue" />

TS：

 this.mySQLRespData = d; //here am loading data into kendoDropDown

$("#hereMyDropDownValue").keyup(function(){
                    var respData = $(this);
                    if(respData. val() == ""){
                      respData.addClass("highlight")
                    } else {
                      respData.removeClass("highlight")
                    }
                }); 
$("#hereMyDropDownValue").kendoComboBox({                   
    dataSource: {
       d : this.mySQLRespData 
    },
    value:serialID,    
});

CSS

.highlight{
 border-color:red;
}

我希望在用户删除/退回已加载的数据时突出显示输入框。

问题是当它变空时不突出显示框边框。我正在使用剑道下拉。

Answer 1

我认为您错过了与$(function(){ });的联系。您还需要从.on('keyup'功能更改.keyup。 keyup函数不适用于动态DOM。

＆＃13;

$(function() {
 var serialID='';
  $("#hereMyDropDownValue").on('keyup', function() {
    var respData = $(this);
    if (respData.val() == "") {
      respData.addClass("highlight")
    } else {
      respData.removeClass("highlight")
    }
  });

/*$("#hereMyDropDownValue").kendoComboBox({                   
dataSource: {
   d : this.mySQLRespData 
},
value:serialID,    
});*/
});

＆＃13;

.highlight {
  border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>-->
<input id="hereMyDropDownValue" />

＆＃13;

Answer 2

当jQuery查找#hereMyDropDownValue元素时，可能它不在DOM中。你应该确保在ajax加载完成后查找它。

如果它为空，则将类添加到高亮输入框边框

2 个答案: