Question

我正在创建一个类似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中。

我尝试了很多选择器但是无法触发警报。我的选择器不正确吗？或者是别的什么？

Answer 1

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

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

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

此处.tweets元素应该是静态的，不会动态重新生成。

Answer 2

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

此外，由于您甚至在“a”标签上绑定了一个点击，因此您需要阻止其默认行为。

请参阅fiddle

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>

jQuery选择器或代码不工作

2 个答案: