элементами - после ajax не работает jquery
jquery click не работает с созданным контентом ajax (3)
Я использую $(".button").on("click", function(){ });
щелкнуть по кнопке, которая находится на контейнере, но затем выполняется вызов ajax, и содержимое обновляется с новым материалом, а затем, когда я пытаюсь нажать кнопку .button
он не будет работать ... ничего не получится, когда я .button
кнопку.
Я даже попробовал
$(".button").live("click", function(){ });
или
$(".button").click(function(){ });
Как я могу заставить его работать?
EDIT: мой html:
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="reload" class="button" />
</div>
Вместо:
$(".button").on("click", function() { } );
Я использовал:
$(".container").on("click", ".button", function() { } );
Я использовал это, и это сработало.
Должно быть сделано таким образом.
$('body').on('click', '.button', function (){
alert('click!');
});
Если у вас есть контейнер, который не изменяется во время запроса ajax, это более эффективно:
$('.container').on('click', '.button', function (){
alert('click!');
});
Всегда свяжите событие делегата с ближайшим статическим элементом, который будет содержать динамические элементы.
Это то, что вы пытаетесь сделать? Заметьте, я помещаю $.on()
в родительский, но .button
для действия.
.on (события [, селектор] [, данные], обработчик (eventObject))
selector Селекторная строка для фильтрации потомков выбранных элементов, которые запускают событие. Если селектор имеет значение null или опущен, событие всегда срабатывает, когда оно достигает выбранного элемента.
<div id="stuff">
<button class="button">Click me!</button>
<p>Stuff</p>
</div>
var $stuff = $('#stuff'),
ajaxContent = $stuff.html();
$stuff.on('click', '.button', function(){
$.get('/echo/html/', function(){
$stuff.empty();
console.log($stuff.html());
alert($stuff.html()); // Look behind, #stuff is empty.
$stuff.html(ajaxContent);
console.log($stuff.html());
});
});
Еще одна демонстрация:
var $stuff = $('#stuff'),
ajaxContent = $stuff.html(),
$ajaxContent,
colors = ['blue','green','red'],
color = 0;
$stuff.on('click', '.button', function(){
$.get('/echo/html/', function(){
color++;
if (color == colors.length) color = 0;
console.log($stuff.html());
alert($stuff.html());
$ajaxContent = $(ajaxContent);
$stuff.append($ajaxContent).css('color', colors[color]);
console.log($stuff.html());
});
});