Question

我正在使用带有Boxy插件的JQuery。

当用户点击一个页面上的链接时，我会调用Boxy.load将表单加载到弹出窗口中。表单加载并显示在弹出窗口内而没有任何问题。

但是，我无法将表单绑定到提交事件，因为我无法选择表单元素。

这是事件处理程序：

    $('#flag-link a.unflagged').click (function(e) {
        url = $(e.target).attr('href');
        Boxy.load(url, {behaviours: function(r) {
            alert ($("#flag-form").attr('id'));
            }
        });
    });

警告显示时会显示“未定义”。

这就是形式：

<form id="flag-form" method="POST" action="somepage">        
    <table>
        <tr><td><input type="text" name = "name"></td></tr>
        <tr><td><input type="submit" value="OK"></td></tr>
    </table>
</form>

我做错了什么？

Answer 1

首先（一个小问题，但是潜在的麻烦来源），它应该是id="flag-form"而不是id = "flag-form"（没有空格）。

其次，您不应该需要r.find()。只需$("#flag-form").attr("id")

Answer 2

据我所知，在这种情况下，必须使用live()方法将元素绑定到事件：

$("#flag-form").live("submit", function(){ ... }

目前，live方法被记录为不支持提交事件。但是，我可以使用Chrome和FF来解决这个问题。另一方面，我无法在IE中使用它。跨浏览器兼容性的更好方法似乎是将表单的提交按钮绑定到click事件。

$("#flag-form-submit").live("click", function(){

Answer 3

我了解到除了使用live（）方法之外，在behaviours: function (e) {}中声明方法也有效。

E.g：

$('#flag-link a.unflagged').click (function() {
    Boxy.load(this.href, {
      behaviours: function(r) {
        r.find('#flag-form').bind('submit', function() {
          // do on submit e.g. ajax calls etc.
        });
      }
    });
    return false;
});

Answer 4

Boxy在iframe中打开网址（url = $(e.target).attr('href');）。因此，您无法从首页（父页面）找到该表单。绑定表单的代码应该在子页面中（即Boxy iframe）。您可以使用代码url = $(e.target).attr('href');

检查iframe网址

带有boxy插件的jquery - 通过ajax加载并提交表单

4 个答案: