Вход

Просмотр полной версии : Нажатие button в ajax контенте

GoodBoy123
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
20.07.2012, 07:08
$("div.#container").append(html) точку уберите, должно быть div#container или div.container
devote
20.07.2012, 07:10
но все равно задача не понятна
GoodBoy123
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
20.07.2012, 10:26
$(document).on( 'click', '#submit', function() {
alert("veff");
});
GoodBoy123
20.07.2012, 10:33
Большое спасибо. Если не сложно, можно ссылку на статью, где можно было бы прочитать, почему Ваш вариант работает, а мой нет.
devote
20.07.2012, 10:38
http://api.jquery.com/on/
tadjik1
20.07.2012, 10:55
не используйте id="submit".

единственная кнопка и так вроде сабмитит форму по спеке, не уверен...
SkyLight
20.07.2012, 12:47
Дело не в этом. Там контент грузится аяксом, а вот обработчик на кнопку вешается еще до того, как она была загружена. Потому и не работало.
tadjik1
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.).