0

首先，我定制了 bootstrap-modal.js 以加载远程 php 表单。这是自定义（感谢drawjoh，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(); });    
        }    
      });    
  })

该模式使用 form#email-entry-form 加载 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 中具有预定义表单值的每个模式窗口加载隐藏表单。

感谢您的任何见解。

4

1 回答 1

0

如果我理解正确，您在加载表单之前绑定到“#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

于 2012-07-14T18:57:40.973 回答