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，格式为＃email-entry-form：

<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加载的，它触发了模态窗口，但是click函数不起作用。我认为它无法到达模态窗口中的元素，后来用ajax ...

加载

我尝试在此点击功能中提醒输入的值并获得未定义的响应。我不想放弃并为view_ent.php中预定义的表单值加载每个模态窗口的隐藏表单。

感谢您的任何见解。

Answer 1

如果我理解正确，您在加载表单之前就会绑定到'#contact-send'的click事件。 'contact-send'元素不存在，因此没有任何约束。

在加载表单后尝试连接点击，例如输入聚焦在成功函数中。

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

虽然不是一般目的，但我希望这传达了这个想法。

此外，看起来modal插件有一个show事件。在向用户显示表单后，您可以使用它来连接您的点击。

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

如何使用带有ajax的表单html与bootstrap-modal.js一起提交ajax表单

1 个答案: