如何使用ajax加載的表單html提交ajax表單與bootstrap-modal.js

Question

首先我定製了bootstrap-modal.js以加載遠程php表單。 這裏是定製（感謝drewjoh，https://gist.github.com/1688900）：

/*  
    $(function() {  
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function (e) {  
     var $this = $(this), href  
     , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7  
     , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())  

     e.preventDefault()  
     $target.modal(option)  
    })  
    })  
    */  

    $(function() {  
     $('[data-toggle="modal"]').click(function(e) {  
     e.preventDefault();  
     var href = $(this).attr('href');  
     if (href.indexOf('#') == 0) {  
      $(href).modal('open');  
     } else {  
      $.get(href, function(data) {  
       $(data).modal();  
      }).success(function() { $('input:text:visible:first').focus(); });  
     }  
     });  
    })  

模態負載email_ent.php與形式＃電子郵件入門形式：

<div class="modal fade in" id="contact-container"> 
    <form action="#" id="email-entry-form" style="margin:0"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3 id="contact-title">Email Entry #{$entry_id}</h3> 
     </div> 
     <div class="modal-body"> 
      <textarea class="full focused" id="contact-email" name="email" tabindex="1003" max-length="199" rows="3"></textarea> 
      <p class="help-block">Use commas to separate email addresses...</p> 
      <input type="hidden" name="form_id" value="{$form_id}" id="form_id" /> 
      <input type="hidden" name="entry_id" value="{$entry_id}" id="entry_id" /> 
     </div> 
     <div class="modal-footer"> 
      <button type="reset" data-dismiss="modal" class="btn">Cancel</button> 
      <a id="contact-send" class="btn btn-primary" tabindex="1004" href="#">Send</a> 
     </div> 
    </form> 
</div> 

這是jQuery的功能，我使用，但無法得到任何迴應。

(function($){ 

    $('#contact-send').click(function (e) { 
     e.preventDefault(); 
     // validate form actions cleaned for clearity. 
     $.ajax({ 
      url: 'email_ent.php', 
      data: $('#email-entry-form').serialize() + '&action=send', 
      type: 'post', 
      cache: false, 
      dataType: 'html', 
      complete: function (xhr) { 
       /* 
       more code here... 
       */ 
       alert('OK!'); 
      }, 
      error: contact.error 
     }); 
    }); 

})(jQuery); 

的jquery.js而這個功能是從激發態窗口view_ent.php加載，但單擊功能不起作用。我認爲它不能達到模式窗口內的元素，然後用ajax加載...

我試圖在此點擊函數內提醒輸入值，並得到未定義的響應。我不想放棄並在view_ent.php中爲每個模態窗口加載具有預定義窗體值的隱藏窗體。

感謝您的任何見解。

Answer 1

如果我的理解正確，在加載表單之前，您綁定了'＃contact-send'的點擊事件。 'contact-send'元素不存在，所以沒有任何限制。

試着在它加載的窗體後面點擊鼠標，例如輸入聚焦在成功函數中。

$.get(href, function(data) {  
    $(data).modal();  
}).success(function() { 
    $('input:text:visible:first').focus(); 
    $('#contact-send').click(function (e) {...}); 
}); 

雖然不是一般用途，但我希望這可以傳達出這個想法。

此外，它看起來像模態插件有一個顯示事件。在向用戶顯示錶單後，您可以使用它來連接點擊。

http://twitter.github.com/bootstrap/javascript.html#modals