jquery 1.11.1 - live vs on

Question

对于1.7，不赞成使用实时事件-我使用的是当前的1.11.1 jquery版本。现在，也在文档上说，对于1.9 jquery，live被删除了——我觉得很好。对于下一个案例

<script type="text/javascript">
    $(document).ready()
{
    $("#submitFile").live('click', function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });
    $('#fileCtrl').live('change', function (event) {
        alert(1);
    });
   <!--  this was a typo from-->
    $('#fileCtrl').live('on', function (event) {
        alert(1);
    });
}
</script>

<div id="uploadDiv">
    <input name="import" value="import" type="file" id="fileCtrl" />
    <input type="submit" value="export" id="fileupload"  />
</div>

对于我目前的项目，我不得不重新使用live。"on"事件simple不会启动。有什么原因吗？我尝试了live-and-it-work，它在doc上说它在1.9版上被删除了。有什么线索吗？为什么live仍然有效，为什么"on"不起作用？

提前谢谢。

Answer 1

您需要重新排列调用堆栈。这意味着，您需要以父节点为目标，该父节点能够捕获您想要的所有click事件，并像一样绑定它

$('the_parent_node_probably_document_body').on('click', '#submitFile', function( e ) {
});

话虽如此，从ID选择器委派任何事件实际上都没有多大意义，因为它只会在标记中出现一次，实际上您希望委派来自多个节点的事件。所以我现在很困惑。

Answer 2

元素没有"on"事件。

$('#fileCtrl').live('change', function (event) {
    alert(1);
});
$('#fileCtrl').live('on', function (event) {
    alert(1);
});

当触发"change"或"on"事件时，您的代码表示相同的反应。可能是你把"change"事件和"on"搞砸了？

Answer 3

on是一个函数，而不是DOM事件。该事件仍被称为"更改"：

$('#fileCtrl').on('change', function (event) {
    alert(1);
});

Answer 4

如简单示例所示，您不需要使用live或on（第三个示例似乎是一个错误，因为没有on事件。on是一个jQuery方法）。您的DOM就绪处理程序上还缺少function和右括号。

例如，使用普通click并更改methods:

$(document).ready(function()
{
    $("#submitFile").click(function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });
    $('#fileCtrl').change(function (event) {
        alert(1);
    });
});

请注意，上一个示例对此版本无效，因此我已将其排除在外。

如果你真的想使用on，新的语法应该是：

$(document).ready(function()
{
    $("#submitFile").on('click', function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });
    $('#fileCtrl').on('change', function (event) {
        alert(1);
    });
});

最后，如果元素被动态添加到页面中，则使用委托的事件处理程序，连接到一个不变的祖先（默认为文档）：

$(document).ready(function()
{
    $(document).on('click', "#submitFile", function (e) {
        alert('button clicked');
        e.preventDefault();
        alert(1); 
    });
    $(document).on('change', '#fileCtrl', function (event) {
        alert(1);
    });
});

回复：DOM就绪处理程序。DOM就绪有一个更简洁的快捷方式，它很简单：

$(function(){ YOUR CODE HERE });

Answer 5

我发现了错误！！！

这是准备好文件的申报单——我真愚蠢！

$(document).ready()
{

代替$（document）.ready（function）

感谢大家：）