如何使用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