1

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

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

4

2 回答 2

3

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

很可能您的代码会生成没有绑定事件的新推文。您应该更好地使用事件委托来解决这个问题：

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

这里.tweets的元素应该是静态的，而不是动态重新生成的。

于 2013-10-11T14:11:02.387 回答
0

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

此外，当您甚至在“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>
于 2013-10-11T14:15:51.317 回答