如何克服函数中的嵌套？

我很新的JavaScript和jQuery，并遇到了一个问题，我还没有找到解决方案。我会尝试以相当简单的方式绘制它。如何克服函数中的嵌套？

我有一个页面为用户提供了一些选择（它的游戏，所以..）如攻击或防守，使用什么武器。然后它加载两个html，每个都有一个“提交”按钮。提交按钮绑定到（分开的）将数据传递给ajax的函数。

我遇到的问题是我埋在嵌套函数中。那有意义吗？我的代码看起来是这样的：

代码：

$(function() { 
    $('#choice1').click(function() { 
     //do some stuff 
    }); 
    $('#choice2').click(function() { 
     //do some stuff 
    }); 
    $('#choice3').click(function() { 
     //do some stuff, including creating the choices below, and their submit boxes 
     $('#subChoice1').click(function() { 
       //send data with ajax to a php document. get result 
       //create some text on my document to display results 
       //create an input button, along with an id="subButton1" 
     }); 
     $('#subChoice2').click(function() { 
       //send data with ajax to a php document. get result 
       //create some text on my document to display results 
       //create an input button, along with id="subButton1" 
       //(yes, feed both back to same func) 
     }); 
    }); // end choice3 
    $('#subButton1').click(function() { 
       //my buttons in the subChoices do not call this function(!!??) 
    }); 
});

编辑：链接不再起作用，对不起。而且我创建了living example here.

感谢您的任何提示或指示。我几乎可以肯定，只是有一件简单的事情，我错过了或没有意识到这会让我走上正轨。

来源

2011-04-15 jeremy

为什么你有你的点击绑定嵌套？ – Headshota 2011-04-15 21:22:11

，因为我不知道更好的方法来做到这一点。我正在学习。 – jeremy 2011-04-15 21:37:59

你总是可以使用正常的命名函数，而不是内联的匿名函数。如果功能高峰越来越高，这可能会有所帮助。

更新：

这是你的工作案例1：

$('#button1').click(function(){ 
     $('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 2" id="button2"/>') 

     $('#button2').click(function() { 
      $('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>'); 
      $('#div1').append('<input type="button" value = "Button 3" id="button3"/>') 

       $('#button3').click(function() { 
        $('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>'); 

       }); 
     }); 

    });

什么我建议是这样来更新它：

function button3_click() { 
     $('#div1').append('<span id="span1"><br>Hey! Button 3 worked!. That\'s probably enough.</br></span>'); 
    } 

    function button2_click() { 
     $('#div1').append('<span id="span1"><br>Hey! Button 2 worked!. Let\'s keep going.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 3" id="button3"/>'); 
     $('#button3').click(button3_click); 
    } 

    function button1_click() { 
     $('#div1').append('<span id="span1"><br>Alright. Button 1 worked. Here\'s another button.</br></span>'); 
     $('#div1').append('<input type="button" value = "Button 2" id="button2"/>') 
     $('#button2').click(button2_click); 
    } 

    $('#button1').click(button1_click);

这样的结构逻辑保持不变，但可以抽出嵌套的函数定义。

来源

2011-04-15 21:19:28 recursive

感谢您的回复。这似乎是正确的路要走，但我不知道如何在jquery中执行它。查看这里的代码：http://www.dixieandtheninjas.net/hunter/dev/test.js（案例1有内联匿名函数，工作得很好。案例2类似，但函数不是内联的，因此创建的按钮无法引用这些函数） – jeremy 2011-04-15 21:38:48

@Jeremy：这些函数仍然是内联的。查看我的示例，了解我命名函数的含义。 – recursive 2011-04-15 21:44:02

非常感谢，我会给这个镜头！ – jeremy 2011-04-15 21:47:40

如果您一直重复使用提交按钮的类或标识符，您可以利用jQuery的live()方法。它将允许您为父项选择的点击处理程序以外的位置创建$('#subChoice1')和$('#subChoice2')的绑定，但仍然可以在创建它们时正确绑定它们。

来源

2011-04-15 21:21:22

如何克服函数中的嵌套？

回答

相关问题