как мне преодолеть вложение в функции?

Question

Я довольно новичок в 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(!!??)
  });
});

edit: ссылка больше не работает, извините. И я создал живой примерздесь.

Спасибо за любые советы или указатели.Я почти уверен, что есть что-то простое, что я упускаю или не знаю, что поможет мне встать на правильный путь.

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

Таким образом, структура логики остается прежней, но вы можете вытащить определения вложенных функций.

Answer 2

Если вы последовательно используете классы или идентификаторы для кнопок отправки, вы можете использовать метод jQuery live(). Это позволит вам создавать привязки для $('#subChoice1') и $('#subChoice2') вне обработчика щелчка для родительского выбора, но при этом они будут правильно привязываться при создании.