javascript 使用 jQuery replaceWith 替换 DIV 的内容仅在第一次工作时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4995185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery replaceWith to replace content of DIV only working first time
提问by Paul
I'm using the following jQuery to pull new data and replace the contents of the DIV listdata
我正在使用以下 jQuery 来提取新数据并替换 DIV listdata 的内容
$(function(){
$('.refresh').click(function(event) {
event.preventDefault();
$.ajax({
url: "_js/data.php",
success: function(results){
$('#listdata').replaceWith(results);
}
});
});
});
The script is triggered by numerous links on the page, such as:
该脚本由页面上的许多链接触发，例如：
<a href="" id="update1" class="refresh">Update 1</a>
<a href="" id="update2" class="refresh">Update 2</a>
For some reason the script only works on the first click of a link. Subsequent clicks do not refresh the data.
出于某种原因，该脚本仅适用于第一次单击链接。后续点击不会刷新数据。
I've seen various fixes but nothing that I can get working. Any suggestions?
我已经看到了各种修复，但没有任何可以解决的问题。有什么建议？
回答by Sam Dufel
It looks to me like your problem is with using replaceWith.
在我看来，您的问题是使用replaceWith.
You're removing the element which matches $('#listdata')on the first call of replaceWith, so subsequent refreshes can't find where the data is supposed to be placed in the document.
您正在删除$('#listdata')在第一次调用时匹配的元素replaceWith，因此后续刷新无法找到数据应该放置在文档中的位置。
You could try something like
你可以尝试类似的东西
$('#listdata').empty();
$('#listdata').append(results);
or chained like this
或者像这样被锁起来
$('#listdata').empty().append(results);
回答by Dominic Barnes
If you're using replaceWith(), you're replacing #listdatawith a brand new element altogether.
如果您正在使用replaceWith()，您将#listdata完全替换为一个全新的元素。
If dataisn't something like <div id="listdata"></div>then #listdatais disappearing after the replaceWith(). I'm thinking you should probably use html()instead.
如果data不是这样的东西，<div id="listdata"></div>那么#listdata在replaceWith(). 我想你可能应该html()改用。
回答by ?ime Vidas
Try:
尝试：
$('a.refresh').live('click', function(e) {
e.preventDefault();
$.ajax({
url: '_js/data.php',
success: function(data) {
$('#listdata').empty().html(data);
}
});
});
If the .refreshanchors are inside the #listdataelement, then delegation is a more optimized solution:
如果.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);
}
});
});
回答by Rui Jiang
You'll need to change the href's on your links to <a href="#">...</a>. This prevents the browser from refreshing when you click the link.
您需要将链接上的 href 更改为 <a href="#">...</a>。这可以防止在您单击链接时刷新浏览器。
If you're doing things this way, you'll also want to stick a "return false" at the end of the click handler to prevent bubbling.
如果您以这种方式做事，您还需要在点击处理程序的末尾粘贴“return false”以防止冒泡。
