Javascript Ajax表单提交未加载新提交的数据

我更新了jquery以便可以使用新的jquery mobile ui 1.3，出于某种原因，我的表单不再更新页面，它以前可以工作，但不是通过ajax，它只是在没有ajax的情况下提交表单，不过，我希望ajax只获取新数据并将其附加到div中，而不是在弹出窗口关闭时重新加载整个页面

我在表单中使用弹出式模块，提交时，它应将新信息附加到

#content ul

JS

<!-- Load Json data and events -->
<script type="text/javascript">
    jQuery('#new_rave').live('submit',function( event ) {
        $.ajax({
            url: 'http://whoops/goodtimes',
            type: 'POST',
            dataType: 'json',
            data: $('#new_rave').serialize(),
            success: function( data ) {
                for( var id in data ) {
                   jQuery('#').html(data[id]);
                }
            }
        });
        return false;
    });
    $(document).ready(function() {
        $.getJSON('http://whoops/goodtimes', function( goodtimes ) {
            $.each(goodtimes, function( goodtime ) {
        var output = 
            "<li><a href="+this.goodtime.id+">" + 
            "<h3>" + this.goodtime.title + "</h3>" +
            "<p>" + this.goodtime.post + "</p>" +
            "<p class='ui-li-aside'><strong>" + 
                this.goodtime.created_at + "</strong></p>" +
            "</a></li>";
            $('#content ul').append(output).listview('refresh');
        });
        });
    });
</script>

jQuery（'new#rave'）.live（'submit'，函数（事件）{
$.ajax({
网址：'http://whoops/goodtimes',
键入：“POST”，
数据类型：“json”，
数据：$（'#new_rave'）。序列化（），
成功：功能（数据）{
for（数据中的变量id）{
jQuery（'#'）.html（数据[id]）；
}
}
});
返回false；
});
$（文档）.ready（函数（）{
$.getJSON（'http://whoops/goodtimes，功能（好时光）{
美元。每个（好时光，功能（好时光）{
变量输出=
“
”；
$（'#content ul'）。追加（输出）。列表视图（'refresh'）；
});
});
});

形式

<!-- New item Popup -->
<div data-role="popup" class="ui-content"
data-overlay-theme="a" data-position-to="window" id="add">
    <form id="new_rave">
        <label for="goodtime_title">Title</label>
        <input type="text" name="goodtime[title]" id="goodtime_title">
        <label for="goodtime_post">Rave</label>
        <div data-role="fieldcontain">  
        <textarea name="goodtime[post]" id="goodtime_post"></textarea>
        </div>
        <input type="submit" value="submit">
    </form>
</div>

标题
咆哮

以及内容部

<div id="content" data-role="content">  
    <ul data-role="listview" data-theme="d" data-divider-theme="d"></ul>
</div><!-- /content -->

Intro 您的问题可能是由于$（document）.ready（function（）{。在

中，Ajax用于在导航时将每个页面的内容加载到

DOM

。因此，

$（document）.ready（）

将在加载第一页之前触发，用于页面操作的所有代码都将在页面刷新后执行

这里的一切都可以在我的个人博客中找到详细的描述

如果这不是问题，请使用Firefox/Chrome插件

Firebug

测试ajax调用是否已到达服务器，以及是否已收到响应

最后一件事，不要每次添加新元素时都刷新列表视图。

列表视图

刷新是一个巨大的时间消耗，每次刷新可以持续50毫秒左右，但要多次刷新，您的重新排序可能会永远失败

解决方案 因此，改变这一点：

    $.getJSON('http://whoops/goodtimes', function(goodtimes) {
      $.each(goodtimes, function(goodtime) { 
        var output = 
        "<li><a href="+this.goodtime.id+">" + 
                "<h3>" + this.goodtime.title + "</h3>" +
                "<p>" + this.goodtime.post + "</p>" +
                "<p class='ui-li-aside'><strong>" + this.goodtime.created_at + "</strong></p>" +
            "</a></li>";
        $('#content ul').append(output).listview('refresh');
     });
    });

---

尝试了一下，它似乎对我没有任何帮助，我只是删除了beta版，回到了1.2版，它运行得很好，但是现在我注意到，当我每次发布一篇文章时，它都会重复增加一次。

    $.getJSON('http://whoops/goodtimes', function(goodtimes) {
      $.each(goodtimes, function(goodtime) { 
        var output = 
        "<li><a href="+this.goodtime.id+">" + 
                "<h3>" + this.goodtime.title + "</h3>" +
                "<p>" + this.goodtime.post + "</p>" +
                "<p class='ui-li-aside'><strong>" + this.goodtime.created_at + "</strong></p>" +
            "</a></li>";
        $('#content ul').append(output);
     });
     $('#content ul').listview('refresh');
    });

$('#test-button').off('click').on('click', function(e) {
    alert('Button click');
});