1

Railsにすでに組み込まれているAPIに接続する最初のPhoneGapアプリケーションを構築しています。ユーザーがコンテンツを投稿できるセクションがありますが、ユーザーが[送信]をクリックすると、問題なくフォームが送信され、投稿が追加されます。結構ですが、ユーザーがアプリの別のセクションに移動すると、投稿の2番目のコピーが表示されます。サーバーコンソールを見ると、投稿が複数回表示されます。もう1つの非常に奇妙なことは、ユーザーがそのセクションで再度投稿を続けると、追加の投稿の上に追加の投稿が追加され、ユーザーが同じ投稿を一度に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 に答える