Использование JQuery ReplaceWith заменить содержимое DIV работает только первый раз

Question

Я использую следующий JQuery, чтобы тянуть новые данные и заменить содержимое DIV ListData

$(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

Try:

$('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); 
     } 
    }); 
}); 

Answer 3

Вам нужно изменить HREF на ваши ссылки на < a href = "#" > ... </a >. Это предотвращает обновление браузера при нажатии ссылки.

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

Answer 4

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

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