Javascript 从jquery live切换到on'；行不通

我已经使用live jquery方法很长一段时间了，到目前为止它一直在工作，但是我读到我不推荐使用的live方法被“on”取代

我有几个标题都属于同一个类，但ID不同。 单击其中一个标题时，我想打开一个对话框。在下面的示例中，我用一个简单的警报替换了jquery对话框的打开。页面的html代码是使用php动态生成的

作为记录，我在Chrome的javascript控制台中收到一个错误。 它说UncaughtTypeError:undefined不是一个函数jquery:16。 另外，我正在从DocumentReady调用的函数调用下面的代码

这个很好用

$(".antennaCursor").live("click", function() {
   alert("Hi");
});

这不管用

$(".antennaCursor").on("click", function() {
   alert("Hi");
});

这个也没有

$(document).live("click", ".antennaCursor", function() {
   alert("Hi");
});

这是行不通的

我包括最新的jquery版本。 和

有人对如何解决这个问题有什么建议吗

编辑：更新了此处的代码，因为它缺少一些结尾的parenthei和分号。不过，真正的代码是正确的

下面是代码的调用方式

$(document).ready(function() {
  handleTheClickEvent();
});

function handleTheClickEvent() {
   $(".antennaCursor").on("click",function() {
      alert("Hi");
   });
}

编辑：使用代码时，我意识到代码中可能存在其他问题，这些问题是“on”方法出现问题的根本原因。下面是代码的更新。异常处理随机抛出一个错误，称为“TypeError:undefined is not function”。代码中是否存在导致“on”方法问题的问题

$( ".antennaCursor" ).live("click",function() {
try {
    var data_id = $(this).attr("id");

    url = "http://192.168.0.10/wiki/GetInformation.php?data1"+data_id+"&type=somedata";

    dial=$("<div id='dialog2' style='text-align:left; width:auto; overflow:auto'></div>");
    dial.attr("title","Data information: " + $(this).attr("id"));
    dial.html('Fetching data! <img id="graph" src="/wiki/progress.gif" />');

    dial.dialog({ position: "left"});
    dial.dialog( "option", "width", 600 );
    $.get(url,{
    getmacroinfo : $(this).attr("id"), infotype : "draw"
    }, function(data){
      if ( $( "#accordion" ).data("ui-accordion") )  {      
      $( "#accordion").accordion("destroy");
      $( "#accordion").empty();
      $( "#accordion").remove();
      }
      dial.html(data);

    });


    dial.dialog( "open" );
    return false;
} catch (err) {
    alert(err);
}
});

$（“.antennaCursor”）.live（“单击”，函数）（）{
试一试{
var data_id=$（this.attr（“id”）；
url=”http://192.168.0.10/wiki/GetInformation.php?data1“+data\u id+”&type=somedata”；
拨号=$（“”）；
dial.attr（“title”，“数据信息：”+$（this.attr（“id”））；
html（'Fetching data！'）；
dial.dialog（{位置：“左”}）；
拨号对话框（“选项”，“宽度”，600）；
$.get（url{
getmacroinfo:$（this.attr（“id”），信息类型：“draw”
}，函数（数据）{
如果（$（“#手风琴”）.data（“ui手风琴”）{
美元（“#手风琴”）。手风琴（“销毁”）；
$（“#手风琴”）.empty（）；
$（“#手风琴”）.remove（）；
}
html（数据）；
});
拨号对话框（“打开”）；
返回false；
}捕捉（错误）{
警惕（err）；
}
});

您忘记了每一个按钮上的结束（

）

。语法正确时，

.on（）

函数可以正常工作

现有要素-

$(".antennaCursor").on("click", function() {
   console.log("Hi");
});

活动授权-

$(document).on('click', '.antennaCursor', function() {
    console.log('Hi');
});

---

许多人使用

document

作为捕获冒泡事件的位置，但是没有必要在DOM树中占据那么高的位置。理想情况下，你错过了闭幕式

);

现在工作

$（“.antennaCursor”）。在（“单击”，函数（）{
警报（“Hi”）；
});

单击
这只是一个打字错误。其他答案并非100%正确，它们的工作方式与“生活”不同
无论是现在还是将来，这都应该像预期的那样起作用

$(document).on("click", ".antennaCursor", function() {
   alert("Hi");
});

如果元素是动态添加的，则需要使用此语法来确保元素触发函数

$(document).on('click', 'selector', handler);

这与您的上一个建议相同，但使用的是
打开
而不是
实时
。此外，您还缺少最后的
）

因此，在您的情况下：

$(document).on("click", ".atennaCursor", function() {
  alert("Hi");
})

分号缺失的jay是可选的@Billy。有趣的是，我不知道，虽然我知道在某些情况下你可以忽略它们（只有函数中的语句等）。我总是把它们放进去。对不起，我的问题代码不正确。真正的代码是正确的。当我将“live”改为“on”时，它就停止工作了。为什么要将click处理程序埋在另一个函数中？您必须处理
handleTheClickEvent（）
以及实际的点击事件@user1728363。当我在小提琴中测试代码时，它工作正常，但是抛出一个错误，关于未定义的
handleTheClickEvent（）
。其他答案在使用
on（）
时完全正确。看看第一个例子是假的，其他的答案，期望比我自己的答案更新的答案是假的。它们仅适用于已经存在的元素，而不适用于当前不存在的未来元素。称为“委托”事件，请检查此处。OP展示了@brainhuong-existinfg元素和委托事件的示例。结果是OP的代码中有一个输入错误，一旦修复，如果他有现有的元素和需要委派的元素，那么两个版本的代码都可以工作。此外，许多人使用
document
作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。理想情况下是的，我写道，旧的答案不是100%正确，因为标题要求“从现场切换到打开”。因此，一个100%正确的答案可能会显示出确切的行为。我从来没有说过其他代码是错误的，但它们没有显示出所需的确切代码。所以，我想，我的答案是公平的，并指出了另一个答案的错误。不是吗？也许我错了。你应该寻求一个好的答案。如果你觉得一个答案“不是100%正确”，你应该对这个答案发表评论。真正的代码有“；”。我只是在问题中键入代码时错过了它。