不添加事件监听器答案

【问题标题】：Not adding event listener不添加事件监听器
【发布时间】：2021-03-15 12:13:29
【问题描述】：

我正在为我的代码使用 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>

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

我能做什么？

【问题讨论】：

@WangLiang 用户不太可能在页面重新加载后立即在此字段中触发 keyup 事件。
我也试过了。这不是问题，因为它可以在我的浏览器控制台中运行
为了清楚起见，您说的是用户已经在这些字段中输入数据，然后重新加载页面的情况（在浏览器中会自动填写之前输入的值） ?然后在您分配事件处理程序后触发此事件一次。 $('#newpa').trigger('input');
每次在我不在浏览器控制台中手动输入 jQuery 代码的情况下在页面开始时
我的意思是你所说的确切的“重新加载”场景。不管怎样，你有没有尝试我的建议？

标签： javascript html jquery events jquery-events

【解决方案1】：

$(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" />

【讨论】：

我的问题是什么？
先生，试试你的答案，我在第一个输入和第二个输入中输入 qq，它变红了！！
不，它不起作用我正在尝试。我也尝试过使用document.addEventListener('load', () => {...}); 和document.onload = () => {...}！
我知道。当我尝试它并且我的代码在浏览器控制台中它们工作时，但我不知道当我重新加载页面时它们不起作用！
不，它不起作用，我正在使用“onInput”事件，当我更改输入文本时它必须起作用

【解决方案2】：

在您的代码中存在解析错误，您缺少一个关闭括号。
输入事件将被触发多次，不仅在您完成输入，为了处理这个简单的问题，您可以添加一个 else 语句。

<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>

【讨论】：

请在你回答之前阅读最后一个答案，我也试过了，我试过没有“准备好”事件功能......我说在开始时它不起作用，而我输入我的代码我的浏览器控制台
您尝试在哪个浏览器中执行，您能否首先确认它是否在浏览器中工作，我并不是说您需要删除“加载”，我也没有删除我的答案包含“加载”事件。
你不应该使用 $(document).on('load', handler) 而你可以使用 $(window).on('load', handler)
我说我试过你的答案，也我试过没有“加载”事件函数
请改一下我的问题