Question

I’m pretty new to javascript and jquery, and have run into a problem that I have not yet found a solution for. I’ll attempt to paint it in a fairly simple way.

I have a page that offers the user a few choices (its a game, so..) like attack or defend, what weapon to use. It then loads two html ‘s, each with a “commit” button. The commit buttons are tied to (separate) functions that pass data to ajax.

The problem I have is that I’m getting buried in nested functions. Does that make sense? My code looks something like this:

code:

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

edit: link no longer works, sorry. And I’ve created a living example here.

Thanks for any tips or pointers. I’m almost certain that there is just something simple that I’m missing or unaware of that will get me on the right track.

Answer 1

You could always use normal named functions instead of inline anonymous ones. That might help if the mountain of functions is getting too tall.

Update:

Here’s your working Case 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>');

                });
        });

    });

What I’m proposing is to update it like this:

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

That way the structure of the logic stays the same, but you can pull out the nested function definitions.