6

我更新了 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>

表格

<!-- 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

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

1 回答 1

1

介绍

您的问题可能是由于 $(document).ready(function(){。在jQuery Mobile中，Ajax 用于在DOM您导航时将每个页面的内容加载到其中。因为这$(document).ready()将在您的第一页加载和每个代码之前触发用于页面操作的将在页面刷新后执行。

这里的所有内容都可以在我的个人博客 文章中找到更详细的描述。

如果这不是问题，请使用 Firefox/Chrome 插件Firebug测试 ajax 调用是否已到达服务器以及是否已收到响应。

最后一件事，不要在listview每次添加新元素时刷新。listview刷新是一个巨大的时间槽，每次刷新可以持续大约 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');
     });
    });

对此：

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

编辑

不断重复发帖的问题在于 jQuery Mobile 如何处理事件绑定。因为每次事件将被一遍又一遍地绑定时，页面会不断地被重新访问。在您的情况下，这将是一个执行 JSON 调用的事件。

这可以通过多种方式防止，最常见的一种是在绑定之前取消绑定事件。例如：

$('#test-button').off('click').on('click', function(e) {
    alert('Button click');
});
于 2013-01-25T08:47:10.670 回答