1

我正在构建我的第一个电话间隙应用程序以连接到我已经在 rails 中构建的 API，我有一个用户可以发布内容的部分，但是当用户单击提交时，它会毫无问题地提交表单并附加帖子很好，但是如果用户导航到应用程序的另一个部分，然后返回会有第二个帖子副本，如果我观看我的服务器控制台，我可以看到它多次发布，另一个真正奇怪的事情是如果用户继续在该部分再次发布，它将在附加帖子的顶部添加一个附加帖子，依此类推，直到用户一次发布相同的帖子 10 次。

似乎它出于某种原因多次循环该函数，但我真的不确定为什么，我有预感它与我的

jQuery('#new_rave').live('submit', function( event ) {

但是我尝试过的其他方法导致页面无法加载。

jQuery/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

3 回答 3

2

我现在真的不知道你的代码是什么.. 但是对于 ajax 调用，我主要为变量分配值.. 像这样

jQuery('#new_rave').click(function( event ) {
    var title = $(':input[name="goodtime[title]"]').val() ;
    var post = $(':input[name="goodtime[post]"]').val() ;
    $.ajax({
        url: 'http://whoops/goodtimes',
        type: 'POST',
        dataType: 'json',
        data: {'title' : title , 'post': post},
        success: function( data ) {
            for( var id in data ) {
               jQuery('#').html(data[id]);
            }
        }
    });
    return false;
});

只需用按钮元素替换提交输入..这将节省大量不必要的工作并避免很多麻烦

于 2013-01-26T06:23:16.797 回答
0

那是因为您的提交按钮本身发布了表单（默认情况下）并且显然也发布了 ajax ......
这是您如何禁用提交按钮的默认操作。

jQuery(SUBMIT_BUTTON_ID).bind('click',function( event ) {
   event.preventDefault();       
    $.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]);
            }
        }
    });
});
于 2013-01-26T05:15:59.753 回答
0

在再次绑定之前先尝试取消绑定事件

$('#new_rave').off().on('submit', function(event) {
    //your code goes here
});
于 2013-01-26T06:45:52.907 回答