1

嗨，我在导航栏中列出了：

<div data-role="navbar">
            <ul id="mylist">
                <li onclick=getData() id="first"><a href="#">First</a></li>
                <li onclick=getData() id="second"><a href="#">Second</a></li>
                <li onclick=getData() id="third"><a href="#">Third</a></li>
                <li onclick=getData() id="four"><a href="#">Four</a></li>

            </ul>
        </div>

我有 getData 功能：

<script type="text/javascript">
function getData()
{
    console.log ("first line in getData>>>>");
    $("#first").live("click",function()
        {
            console.log("click on first>>>");
            chkTitle=$(this).text();                
             responseData();

        });


        $("#second").live("click",function()
        {
            console.log ("click on second>>>");
            chkTitle=$(this).text();                
             responseData();

        });

        $("#third").live("click",function()
        {
            console.log("click on third>>>");
            chkTitle=$(this).text();
            responseData();

        });

        $("#four").live("click",function()
        {
            console.log("click on four>>>");
            chkTitle=$(this).text();
            responseData();


        });




    }


</script>

现在，当我第一次点击时，一切都很好。但是当我点击第二次假设时，它会打印一次：“getData>>>>中的第一行”但打印两次：“点击第二次>>>”第三次打印三次，依此类推..

每次 getData>>>> 中的第一行只打印一次，但 live("click",function() 数据每次打印越来越多，为什么会这样？

4

2 回答 2

2

因为您正在定义多个点击处理程序，请尝试以下操作：

 <li id="first"><a href="#">First</a></li>
 <li id="second"><a href="#">Second</a></li>
 ... 


$('#mylist li').click(function(){
    var id = $(this).attr('id');
    console.log("click on " + id);
    chkTitle = $(this).text();   
    responseData();     
})

演示

于 2012-07-08T05:37:41.820 回答
1

我不确定紧密绑定到单独的 ID 是不是最好的方法。理想情况下，该函数将是可重用的，并对存在的一些其他信息（除了 ID）采取行动，例如data-属性或其他使函数解耦的东西。

还值得一提的是，该.live()功能已被弃用，甚至在它被弃用之前通常被搁置以支持.delegate(). 当前使用的“首选”语法.on()仍然.delegate()是.on().

如其他答案和评论中所述：您不需要onclick函数调用。将以下（或未定义的）代码包装在文档就绪函数中，然后就可以设置了。

所以，这两件事不碍事，即使与 ID 紧密耦合，我也会ul像这样将侦听器绑定到元素：

$('#mylist').on('click', 'li', function() {
  console.log('My ID is: ' + $(this).attr('id'));
});

或者进一步充实它，您可以使用 switch （或者如果您更喜欢这种语法，可以使用一系列 if/else if 语句......没有区别）：

$('#mylist').on('click', 'li', function() {
  var thisID = $(this).attr('id');
  switch (thisID) {
    case "first" :
      /* do stuff */
      break;
    case "second" : 
      /* do other stuff */
      break;
    case "third" : 
      /* do other stuff */
      break;
    case "four" : 
      /* do other stuff */
      break;
    default :
      console.log("Umm... I wasn't expecting that... when did I add more elements?");
  }
});
于 2012-07-08T05:50:39.213 回答