Блог

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

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

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

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

Обновить:

Вот ваш рабочий пример 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);
  

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

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