jQuery点击事件异常：设置文本后内容显示即消失问题求助

核心问题分析 #

1. 选择器不匹配：你的jQuery代码中使用了.demo1选择器，但HTML中目标元素的类名是demo，这会导致错误提示无法正确渲染。
2. a标签默认行为未阻止：点击<a>标签时，浏览器会执行默认的跳转动作（即使href="#"，也会触发页面锚点定位），这会让刚显示的文本看起来“立即消失”。

修正后的代码 #

jQuery代码

$(document).ready(function(){
  $(".li").click(function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 检查输入框是否为空（trim()过滤空白字符）
    if ($("#username").val().trim() === "" || $("#password").val().trim() === "") {
      $(".demo").html("hello");
    }
  });
});

HTML代码

<span class="demo"></span>
<a href="#" target="_self" class="li" id="lin">Log in</a>

额外说明 #

• 使用val().trim()代替val().length == ""，能过滤输入框中的空白字符（比如空格、制表符），判断逻辑更严谨。
• e.preventDefault()用于精准阻止a标签的默认跳转行为，也可以在函数末尾使用return false，但前者不会阻止事件冒泡，更适合有后续事件绑定需求的场景。

内容的提问来源于stack exchange，提问作者Babar Hussain