0

我们正在使用 jQuery 1.7.1，我们将在删除不推荐使用的 live() 函数后进行升级。我在这里和其他地方一直在阅读许多关于 live() 和 on() 之间差异的问题。但是，我不明白为什么在我的特定情况下 on() 不能为事件侦听器绑定使用某个（静态）元素。根据文档和其他地方，最好尽可能合理地绑定到您的事件目标，即使“文档”在所有情况下都有效。

首先，我没有改变 DOM。我没有添加或删除元素，这是大多数问题中的常见问题。参与其中的每个人都在那里。

其次，这是我们 HTML 的基本（伪代码！）版本：

<div.container>
    ...
    <ul>
        <li>
            <div.a_static_parent>
                <form method="post" action="call_a_python_func">...
                    <input.a_static_child>
                    <submit /> ...</form>
                 ...non-form stuff...
            </div>
        </li>
        ...x however many items...
    </ul>
</div>

我们的代码实际上在做的是检查两个值是否相同或不同，并据此将提交按钮设置为禁用或不禁用（它可能会更改颜色或警告“FOO！”，但同样的问题）。这是一个 POST-only 形式，而不是 POST-REDIRECT-GET；没有页面刷新。我们只是在后面更新一个值。

我们使用 live() 的旧 jQuery 代码：

$('.a_static_child').live('change blur',  function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

我们使用 on() 的新的、每页加载一次的 jQuery 代码：

$('.a_static_parent').on('change blur', '.a_static_child', function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

始终有效，无论：

$(document).on('change blur', '.a_static_child', function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

在中间情况下，事件会触发，直到我点击提交按钮。之后，使用 on() 而不是 live()，在我刷新页面之前，不会以该表单触发更多事件（对于页面上的每个单独的表单都是如此）。将处理程序移出 .container 或 document 可以解决此问题，但由于表单提交不会以任何方式更改 DOM，我不明白为什么我需要走那么远。

我想让事件更接近实际目标。.a_static_child 总是在 .a_static_parent 中，但并不总是在 .container 中，因为这种形式也出现在对话框和框架等中。

有人可以解释一下当我使用 on() 时点击提交是如何关闭事件的，如果确实如此吗？或者发生了什么？如果需要，我可以发布更多代码，但我希望坚持基础。

4

1 回答 1

1

我刚刚复制了您的代码并实际运行，所以它一定是一个外部问题。这是您的工作代码：http: //jsfiddle.net/MGrwb/1/

<div>   
    <ul>
        <li>
            <div id="a_static_parent">
                <form method="post">
                    <input id="a_static_child" />
                    <button id="testButton">Test</button>
                 </form>
            </div>
        </li>
    </ul>
</div>

$(document).on('change, blur', '#a_static_child', function() {
    alert('FOO!');// and other non-DOM-changing things      
});

$('#testButton').click(function(e) {
   $('form').submit();
});

$('form').submit(function (evt) {
    evt.preventDefault();  
});
于 2013-04-12T09:26:08.360 回答