javascript
  • jquery
  • ajax
  • forms
  • jqtouch
  • 2012-02-19 18 views 0 likes 
    0

    私はPHP開発者で、Ajaxに重くなり始めています。AJAX/Javascriptをフォームに入力して投稿する

    私はこのような場でフォームを作成しています:

    function addSearchResult(label, tz) { 
        var html = ''; 
        html += '<div>' 
        html += '<form id="product-form" >'; 
        html += '<div class="clock">' 
        html += '<div class="hour"></div>' 
        html += '<div class="min"></div>' 
        html += '<div class="sec"></div>' 
        html += '<input type="text" id="label" name="Label" placeholder="Label">' 
        html += '</div>' 
        html += '<div class="city">GMT</div>' 
        html += '<a href="#" class="whiteButton submit" id="view-product-button" >View</a>' 
        html += '</form>' 
        html += '</div>' 
        var insert = $(html); 
        $('#search-results').append(insert.data('tz_offset', tz).find('.city').html(label).end()); 
    } 
    

    そして、私はこのようなフォームの結果を読んでいます:

    $('#product-form').submit(function() { 
        alert('OK'); 
        addProduct('Test Value', 'Test Produlct'); 
        $('input').blur(); 
        $('#add .cancel').click(); 
        this.reset(); 
        return false; 
    }); 
    

    問題は、それが動作しません、です。私は直接htmlにフォームを置く場合、それは正常に動作します。しかし、それをajaxで追加すると、フォームが存在することを認識しません。

    この問題を解決するにはどうすればよいですか?

    +2

    :これを試してみてください://handlebarsjs.com/)の代わりにHTML文字列をビットごとに構築し、それをjQueryで操作して、変更が必要なデータを変更します。 – TheShellfishMeme

    答えて

    3

    ショートカットイベントハンドラ(例:submit()またはclick())を使用するのは、ページロード時にDOMに配置される要素に対してのみ機能します。

    動的に追加される要素については、delegate()またはon()をjQuery 1.7+に使用する必要があります。 HTTP(ロリーMcCrossanが自分に好意を行うと、[ハンドルバー]のようなクライアント側のHTMLテンプレートを使用して、言ったことに加え

    < jQの1.7

    $('#search-results').delegate('#product-form', 'submit', function() { 
        // rest of your code 
    }); 
    

    jQの1.7以降

    $('#search-results').on('submit', '#product-form', function() { 
        // rest of your code 
    }); 
    
    +0

    ありがとう!それは完全に動作します –

    +0

    上記はjQueryの '.live()'メソッドを使って行うこともできますが、http://api.jquery.com/live/ – Vivek

    +0

    @Vivek 'live()いかなるシナリオにおいても、もはや使用すべきではない。それが廃止される以前でさえ、その使用法は、より優れているので、 'delegate()'によって代用されました。 –

    関連する問題