Question

您好我在导航栏中列出了：

<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>

现在我第一次点击第一个veverything是好的。但是当我点击第二个假设时，它会打印一次：“getData＆gt;＆gt;＆gt;＆gt;＆gt;”中的第一行但打印两次：“点击第二个＆gt;＆gt;＆gt;”第三次打印三次等等。

每次getData中的第一行＆gt;＆gt;＆gt;＆gt;是打印只有一次但是实时（“点击”，功能（）数据每次打印越来越多为什么会这样？

Answer 1

因为您要定义多个点击处理程序，请尝试以下方法：

 <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();     
})

DEMO

Answer 2

我不确定紧密绑定到单独的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?");
  }
});

在导航栏中单击列表时会调用多次函数

2 个答案: