未添加事件侦听器

Question

我的代码使用jQuery。我有一个密码输入框，我想要得到输入的密码任何时候。

下面是我的代码：

<input type="password" id="newp" name="newPassword" placeholder="New Password" />
<input type="password" id="newpa" name="newPasswordAgain" placeholder="New Password Again" />

<script>
$(document).ready(() => {
    $('#newpa').on('input', () => {
        if ($('#newpa').val() != $('#newp').val()) {
            $('#newpa').css({
                border: '2px solid red'
            });
        }
    };
});
</script>

我确信这是一个正确的代码，因为当我在浏览器的控制台中输入它时，它可以工作，但当我重新加载页面时，它就不工作了

我能做什么？

Answer 1

1. 在您的代码中存在分析错误您缺少一个右括号。
2. 输入事件将被多次激发，而不仅仅是在您完成键入时，为了处理这个简单的事件，您可以放入else语句。

null

<input type="password" id="newp" name="newPassword" placeholder="New Password" />
<input type="password" id="newpa" name="newPasswordAgain" placeholder="New Password Again" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
    $('#newpa').on('input', () => {
        if ($('#newpa').val() != $('#newp').val()) {
            $('#newpa').css({
                border: '2px solid red'
            });
        } else {
            $('#newpa').css({
                border: '2px solid rgb(118, 118, 118)'
            });
        }
    });
});
</script>

Answer 2

null

js lang-js prettyprint-override">$(document).ready(() => { // Updated
    
    $('#newpa').on('input', () => {
        if ($('#newpa').val() != $('#newp').val()) {
            $('#newpa').css({
                border: '2px solid red'
            });
        }
    });
});

input:focus{
        outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="newp" name="newPassword" placeholder="New Password" />
<input type="password" id="newpa" name="newPasswordAgain" placeholder="New Password Again" />