Question

我有一个输入文本，必须在其中才能使表单正常工作。

所以我希望在Confirm按钮中添加一些功能来检查输入字段是否为空，如果是，则重新着色该输入的边框。

我正在做以下事情：

$(function mainListeners () {   
    "use strict";
    
    var confirm = $('#addNewConfirm');
    var cancel = $('#addNewCancel');
    var eventBox = $('#eventname_input');
console.log("RUNS!!");
    confirm.onclick = function (e) {
        if (eventBox.val() == ''){
            //so if we have an empty event
            //recolor borders.
            console.log("CHANGES!!");
            eventBox.css('border-color','#d81919');
        }else {
            
        }
    }
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
     <button id="addNewConfirm" >Confirm</button>
     <button id="addNewCancel">Cancel</button>
</div>
<div >
    <label>Event:</label>
    <input id="eventname_input" type="text" />
</div>

这里我没有错误，我总是看到RUNS!!消息，所以我的脚本被附加了。但是，我从未看到CHANGES!!消息，因此条件eventBox.val() == ''永远不会成立。我查了一下如何检查输入文本的文本是否为空，这就是我找到的，而且它显然无法正常工作。

如果输入没有文字，我想要帮助整理边框的重新着色。

Answer 1

使用JQuery click()函数代替onclick，如下所示：

＆＃13;

$(document).ready(function() {
  var confirm = $("#addNewConfirm");
  var cancel = $("#addNewCancel");
  var eventBox = $("#eventname_input");
  console.log("RUNS!!");
  confirm.click(function(e) {
    if (!eventBox.val()) {
      console.log("CHANGES!!");
      eventBox.css("border-color", "#d81919");
    } else {
      eventBox.css("border-color", 'inherit');
      // whatever you want
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
  <button id="addNewConfirm">Confirm</button>
  <button id="addNewCancel">Cancel</button>
</div>
<div>
  <label>Event:</label>
  <input id="eventname_input" type="text" />
</div>

＆＃13;

Answer 2

尝试使用设置click事件的Jquery方法（.click（））或检索DOM元素的vanilla JS方法（document.getElementById（））。

下面是一个改变的工作示例!!被叫。

＆＃13;

$(function mainListeners () {   
    "use strict";
    
    var confirm = document.getElementById('addNewConfirm'); //GET DOM ELEMENTS THIS WAY OR SEE BELOW FOR CLICK
    var cancel = $('#addNewCancel');
    var eventBox = $('#eventname_input');
console.log("RUNS!!");
    confirm.onclick = function (e) {//OR CHANGE THIS TO CLICK()
        if (eventBox.val() == ''){
            //so if we have an empty event
            //recolor borders.
            console.log("CHANGES!!");
            event.css('border-color','#d81919');
        }else {
            
        }
    }
    
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
     <button id="addNewConfirm" >Confirm</button>
     <button id="addNewCancel">Cancel</button>
</div>
<div >
    <label>Event:</label>
    <input id="eventname_input" type="text" />
</div>

＆＃13;

Answer 3

事实是confirm[0].click = function(e)是vanilla Javascript，你试图在确认jQuery对象上使用它。

为了解决此问题，您可以使用confirm.click(function (e)语法或{{1}}。我建议你使用jQuery语法：如果你加载这个库，我们鼓励你使用它来增强可读性。

没有输入任何内容时，颜色输入的边框不起作用

3 个答案: