Question

jQuery Core 3.1.0

Chrome，Firefox

以下是jquery.ajax（）成功行为的模型。

很快：我设法通过AJAX获取数据。在此模型示例中，数据由“Just something”占位符表示。现在我想将数据添加到文档中。

<script>
var add_date = $("#add_date");

function add_date_ajax(){
    $('.frame_date').append("Just something");
    debugger; // 1
}
debugger; // 2
add_date.click(add_date_ajax);
</script>

问题：数据出现然后在半秒内消失。

我放置了断点。

当页面加载时，它会在断点2处停止。这是正确的。

当我单击#add_date元素时，脚本在断点1处停止。这也是正确的。

但是当我点击“恢复脚本执行”时，脚本再次进入断点2.这对我来说似乎很奇怪。好像页面被重新加载。也许这就是添加的文字消失的原因。

你能帮我解决这个问题吗？

稍后添加：

https://jsfiddle.net/mv1yu3zw/1/

Answer 1

它会因为您正在重新加载页面而消失。 html

<a href="" id="add_date">Add date</a>

应该是

<a href="#" id="add_date">Add date</a>

Answer 2

要绑定所有活动，您应该使用ready上的document。

为避免重新加载您的网页（因为href代码的a），您必须致电preventDefault或使用button。

您应该像这样编写代码：

$(document).ready(function() {
    $("#add_date").on("click", add_date_ajax);
});

function add_date_ajax(event) {
    event.preventDefault();
    $('.frame_date').append("Just something");
}

添加的数据消失

2 个答案: