Использование jQuery replaceWith для замены содержимого DIV, работающего только в первый раз

Question

Я использую следующий jQuery для извлечения новых данных и замены содержимого списка данных DIV

$(function(){
$('.refresh').click(function(event) {
    event.preventDefault();

    $.ajax({
        url: "_js/data.php",
        success: function(results){
            $('#listdata').replaceWith(results);
        }
    });
});
});

Сценарий запускается многочисленными ссылками на странице, такими как:

<a href="" id="update1" class="refresh">Update 1</a>
<a href="" id="update2" class="refresh">Update 2</a>

По какой-то причине скрипт работает только при первом нажатии на ссылку.Последующие щелчки не обновляют данные.

Я видел различные исправления, но ничего, что я мог бы заставить работать.Есть предложения?

Answer 1

Мне кажется, ваша проблема в использовании replaceWith.

Вы удаляете элемент, который соответствует $('#listdata') при первом вызове replaceWith, поэтому последующие обновления не могут найти, где данные должны быть размещены в документе.

Вы можете попробовать что-то вроде

 $('#listdata').empty();
 $('#listdata').append(results);

или вот так

 $('#listdata').empty().append(results);

Answer 2

Если вы используете replaceWith(), вы заменяете #listdata новым элементом.

Если data не похож на <div id="listdata"></div>, то #listdata исчезаетпосле replaceWith().Я думаю, что вы, вероятно, должны использовать html() вместо.

Answer 3

Вам нужно изменить href в ссылках на ... .Это предотвращает обновление браузера при нажатии на ссылку.

Если вы делаете это таким образом, вам также понадобится добавить «return false» в конце обработчика кликов, чтобы предотвратить появление пузырей.

Answer 4

Попробуйте:

$('a.refresh').live('click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            $('#listdata').empty().html(data);
        }
    });
});

---

Если якоря .refresh находятся внутри элемента #listdata, то делегирование является более оптимизированным решением:

var list = $('#listdata');

list.delegate('a.refresh', 'click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            list.empty().html(data);
        }
    });
});