如何克服函数中的嵌套？

问题描述

| 我对javascript和jquery很陌生，遇到了一个我尚未找到解决方案的问题。我将尝试以一种非常简单的方式对其进行绘制。 我有一个页面可以为用户提供一些选择（例如游戏），例如攻击或防御，使用哪种武器。然后，它加载两个html \，每个都有一个“ commit”按钮。提交按钮与将数据传递到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(!!??)
  });
});

编辑：链接不再有效，抱歉。我在这里创建了一个生动的例子。 感谢您的提示或指示。我几乎可以肯定，有些简单的事情我会丢失或不知道，这会让我走上正确的道路。     

解决方法

您总是可以使用普通的命名函数来代替内联匿名函数。如果功能太多了，那可能会有所帮助。 更新： 这是您的工作案例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);

这样，逻辑的结构就保持不变，但是您可以提取嵌套的函数定义。     ,如果您一直在为提交按钮重复使用类或ID，则可以利用jQuery的

live()

方法。它将允许您在单击处理程序之外为父选项创建

$(\'#subChoice1\')

和

$(\'#subChoice2\')

的绑定，但在创建它们时仍将它们正确绑定。