jQuery 选择器或代码不起作用

jQuery Selector or Code Not Working

本文关键字：不起作用 代码 选择器 jQuery      更新时间：2023-09-26

我正在创建一个类似Twitter的应用程序作为学习练习，并在JS文件的开头有以下内容：

$(function(){
   setInterval(update, 3000);
   $('.tweet li a.username').on('click', function() {
      alert('hey!');
    });
    $('.showMore').on('click', function() {
      moreIndex += 5;
      update();
    })
  });

alert(( 是我想在单击用户名时触发的另一个函数的填充物。我的生成器正在为每条推文创建以下 HTML：

<ul class="tweets">
    <ul class="tweet">
        <li><a class="username" href="#">@jason:</a> tweet text </li><li class="date"> Date </li>
    </ul>
</ul>

这包含在带有类 tweetDiv 的div 中。

我已经尝试了许多选择器，但无法触发警报。我的选择器不正确吗？还是别的什么？

这是另一回事。您的选择器看起来正确。

你的代码很可能生成没有绑定事件的新推文。最好使用事件委派来解决此问题：

$('.tweets').on('click', '.tweet li a.username', function() {
    alert('hey!');
});

在这里.tweets元素应该是静态的，而不是动态再生的。

首先，您需要使包装函数成为自调用函数。

此外，当您绑定点击时，即使是在"a"标签上，因此您需要防止其默认行为。

请参考小提琴

.JS

(function () {
    //setInterval(update, 3000);
    $('.tweet li a.username').on('click', function (e) {
        e.preventDefault();
        alert('hey!');
    });
    $('.showMore').on('click', function () {
        moreIndex += 5;
        update();
    })
})();

.HTML

<ul class="tweets">
    <ul class="tweet">
        <li><a class="username" href="#">@jason:</a> tweet text</li>
        <li class="date">Date</li>
    </ul>
</ul>
相关文章：