Форум

GoodBoy123 · #1 (**permalink**) 20.07.2012, 06:59

Здравствуйте. Работаю с jquery 1.7.2. Нужно обработать нажатие кнопки в генерированной ajax методом страницы. Вот такой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var stepnumber=1;

            if (stepnumber===1) {
                $.ajax({
                    type: "GET",
                    url: "GetTemplate.php",
                    data: "stepnumber="+stepnumber,
                    dataType: "text",
                    success: function(html){
                        $("div.#container").append(html)
                    }
                });
                stepnumber = stepnumber + 1;
            }
            $('#submit').on('click',function(){
                alert("veff");
            });
            $('#hero').on('click',function(){
                alert("veff");
            });
        });
    </script>

<body>
<div class="container" id="container"><input type="button" id="hero" value="heroes"></div> <!-- /container -->
</body>

Кнопка с id hero нормально работает, а с id submit нет. использую метод .on();

devote · #2 (**permalink**) 20.07.2012, 07:08

$("div.#container").append(html)

точку уберите, должно быть div#container или div.container

devote · #3 (**permalink**) 20.07.2012, 07:10

но все равно задача не понятна

GoodBoy123 · #4 (**permalink**) 20.07.2012, 09:01

Точку убрал.
Задача:
Есть страница:

<body>
<div class="container" id="container"><input type="button" id="hero" value="heroes"></div> <!-- /container -->
</body>

В div с id container через ajax вставляется разметка:

$(document).ready(function() {
            var stepnumber=1;

            if (stepnumber===1) {
                $.ajax({
                    type: "GET",
                    url: "GetTemplate.php",
                    data: "stepnumber="+stepnumber,
                    dataType: "text",
                    success: function(html){
                        $("div#container").append(html)
                    }
                });
                stepnumber = stepnumber + 1;
            }

<form class="form-horizontal">
        <fieldset>
            <legend>Выбор</legend>
            <div class="control-group">
                   <label class="control-label" for="region">Выберите:</label>
                   <div class="controls">
                   <select class="span3" id="region" name="region">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                      </select>
                      </div>
           </div>
            <br><button id="submit" type="button" class="btn btn-primary" name="go">Дальше</button>
        </fieldset>
    </form>

Нужно в этом сформированном html обработать нажатие кнопки (<button id="submit" type="button" class="btn btn-primary" name="go">Дальше</button>).

$('#submit').on('click',function(){
                alert("veff");
            });
            $('#hero').on('click',function(){
                alert("veff");
            });
        });

При том как сделано сейчас кнопка с id hero (которая изначально есть в коде страницы) обрабатывается (выдает alert), а кнопка с id submit нет.

devote · #5 (**permalink**) 20.07.2012, 10:26

$(document).on( 'click', '#submit', function() {
    alert("veff");
});

GoodBoy123 · #6 (**permalink**) 20.07.2012, 10:33

Большое спасибо. Если не сложно, можно ссылку на статью, где можно было бы прочитать, почему Ваш вариант работает, а мой нет.

devote · #7 (**permalink**) 20.07.2012, 10:38

http://api.jquery.com/on/

tadjik1 · #8 (**permalink**) 20.07.2012, 10:55

не используйте id="submit".

единственная кнопка и так вроде сабмитит форму по спеке, не уверен...

SkyLight · #9 (**permalink**) 20.07.2012, 12:47

Дело не в этом. Там контент грузится аяксом, а вот обработчик на кнопку вешается еще до того, как она была загружена. Потому и не работало.

tadjik1 · #10 (**permalink**) 20.07.2012, 14:00

ну да, да, это я понял

обработчик, кстати, можно и в колбеке указать.

$(document).ready(function () {
  var stepnumber = 1;

  if (stepnumber === 1) {
    $.ajax({
      type: "GET",
      url: "GetTemplate.php",
      data: {stepnumber: stepnumber},
      dataType: "text",
      success: function (html) {
        $("div#container").append(html);
        $('button[name="go"]').click(function (e) {
          e.preventDefault();
          alert('veff');
        });
      }
    });
    stepnumber = stepnumber + 1;
  }
});

я к тому, что не надо использовать в вёрстке айди, которые совпадают по названию с html-элементами (submit, table, tr, td etc.).

Форум

Справочник

Discord чат

Курсы javascript