Question

我有一个大的有序列表，我使用jquery为每一行添加一个onclick处理程序。这在第一次单击后很有效，但在页面加载后的第一次单击时，根本没有任何操作。页面上没有javascript错误。有什么建议吗？

<ol>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ol>
<script>
    $(document.body).click(function () {
      $("li").each(function (i) {
        this.onclick = function() { alert(i+1); }
      });
    });
</script>

Answer 1

问题是你将它包装在$(document.body).click中，因此除非你先点击页面中的某个地方，否则不会执行内部代码。

尝试不使用$(document.body).click，应该可以正常工作。

Answer 2

这是因为首次单击DOM时绑定列表项上的click事件。我认为你的意思是在DOM准备就绪时绑定click事件：

 $(document).ready(function () {
     $("li").each(function (i) {
         this.onclick = function() { alert(i+1); }
     });
 });

Answer 3

只需在DOM准备就绪时绑定事件，而不是在点击body：

之后绑定

$(function(){
        $("li").each(function (i) {
            this.onclick = function() { alert(i+1); }
        });
});

Answer 4

$("li").click(function () {
    var i = $('li').index(this);
    alert(i+1);
});

OR（使用1.7.1版本）如果在页面加载后插入li。

$(document.body).on('click','li',function () { 
    var i = $('li').index(this);
    alert(i+1); 
});

行动中的示例：http://jsfiddle.net/MarkSchultheiss/37D5w/

Answer 5

在li获得点击事件之前，您似乎要求点击正文。此外，有jQuery和标准javascript的混合，但我不是在这里解决 - 只是让它在这里工作：

<script>
    $(function () {
      $("li").each(function (i) {
        this.onclick = function() { alert(i+1); }
      });
    });
</script>

请注意，这将在运行前等到主体加载，以确保显示每个li并获取事件限制。

Answer 6

您正在向文档添加点击，单击文档时，会将点击事件添加到列表元素中。您需要摆脱第一次单击并将函数更改为准备好的文档：

$(document).ready(function() {
  $("li").click(function() { 
    // do something
  });
});

此外，您不需要每个循环，因为您可以绑定到li元素。

Answer 7

您正在绑定2个点击事件，第一个：

$(document.body).click(function () {

...单击正文时触发，并通过将新的单击事件绑定到列表项来响应，因此第二次单击响应。

目前还不清楚你要做什么，但那个代码几乎肯定不是。：）

jquery onclick处理程序没有调用第一次单击，然后工作

7 个答案: