2

これは私の最初の投稿であり、私の問題を説明するのに十分な情報が含まれていることを願っています.

タイトルが示すように、ポップオーバー内のフォームから jquery 関数を呼び出すのに苦労しています。

この記事に従ってポップオーバーを作成しました
。

これにより、次のコードが作成されます。

          $(".pop").each(function() {
              var $pElem= $(this);
              $pElem.popover(
                      {
                          html:true,
                          title: getPopTitle($pElem.attr("id")),
                          content: getPopContent($pElem.attr("id"))
                      }
              );
          });

          function getPopTitle(target) {
              return $("#" + target + "_content > div.popTitle").html();
          }

          function getPopContent(target) {
              return $("#" + target + "_content > div.popContent").html();
          }

ポップオーバーを表示するリンク:

<a href="" style="" id="contact" class="pop"><i class="icon-pencil"></i> Test</a>

最後に、ポップオーバーをレンダリングする div:

<div id="contact_content">
     <div id="popTitle" class="popTitle">
          title sample
     </div>
     <div id="popContent" class="popContent">
          {% crispy quick_add %}
     </div>
</div>

div 内でテストするために手動でフォームを作成しようとしましたが、違いはありません。

フォームの送信時に、jquery 関数を呼び出して ajax 呼び出しを開始したいと考えています。
これは次のようになります。

         $('.ajax_forms').on('submit',function(e){

              var form_id = $(this).attr('id');
              alert(form_id);
              var errors = 0;
              $('#'+form_id+' input[type=text]').each(function(){
                  if (!$(this).val()){
                      errors++;
                  }
              });
              if (errors > 0) {
                  ajax_alert('error','All fields are mandatory.');
                  return false;
              }
              e.preventDefault();

              $.ajax({
                  type: 'POST',
                  url: '/forms/'+form_id+'/',
                  data: $('#'+form_id).serialize(),
                  success: function(data)
                  {
                      ajax_alert('success','The data is saved.');
                  }
              });
              return false;
          });

デバッグ時に、submit 呼び出しにアラートを追加しましたが、アラートが表示されません。
私を困惑させているのは、同じページのどこにでも（同じクリスピーフォームタグを使用して）フォームを表示するだけで、問題なくデータを送信できることです。

「display:none」として初期化されているポップオーバー div にリンクされていると思いましたが、遊んで表示しても役に立ちません。

この問題を回避するために、jquery を使用して div を表示/非表示にしていますが、ポップオーバーを使用することをお勧めします。これで十分だと思います。

ありがとう

4

1 に答える 1

2

いじってみると、フォームがDOMに追加されていることがわかりましたが、on()を使用するのがこれを処理する方法だと思いました。とにかく、私がそれを機能させた方法はこれを使用することです:

$('body').on('click','button.ajax_button',function(e){
   // your stuff here
});

「.ajax_button」は、フォームの作成時にボタンに追加するクラスです。

フォームの ID を取得するには、次を使用します。

var form_id = $(this).closest('form').attr("id");

それが役立つことを願っています。

于 2013-01-12T20:34:01.030 に答える