javascript - 如何克服函数中的嵌套？

Question

我是 javascript 和 jquery 的新手，遇到了一个我还没有找到解决方案的问题。我将尝试以一种相当简单的方式绘制它。

我有一个页面为用户提供了一些选择(它是一个游戏，所以..)比如攻击或防御，使用什么武器。然后加载两个 html ，每个都有一个“提交”按钮。提交按钮绑定(bind)到(单独的)将数据传递给 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.

感谢您提供任何提示或指示。我几乎可以肯定，只有一些我遗漏或没有意识到的简单事情会让我走上正确的道路。

Answer 1

你总是可以使用普通命名函数而不是内联匿名函数。如果函数堆积如山，这可能会有所帮助。

更新:

这是您的工作案例 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);

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