從實時jQuery切換到不起作用

Question

我已經使用live jquery方法很長時間了，到目前為止，它一直有效，但是我讀到我不贊成使用live方法，而將其替換為“ on”。

我有幾個標題都屬於同一類，但具有不同的ID。 單擊標題之一時，我想打開一個對話框。 在下面的示例中，我用簡單的警報替換了打開的jquery對話框。 該頁面的html代碼是使用php動態生成的。

作為記錄，我在Chrome的javascript控制台中收到錯誤。 它說Uncaught TypeError：undefined不是一個函數jquery：16。 另外，我正在從准備好文檔的函數中調用以下代碼。

這很好。

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

這不行

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

這也不是。

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

這是行不通的。

我包括最新的jquery版本。 http://code.jquery.com/jquery-1.11.2.js和http://code.jquery.com/ui/1.11.2/jquery-ui.min.js

有人對如何解決此問題有任何建議嗎？

編輯：這里更新了代碼，因為它缺少一些結尾的括號和分號。 但是，真實的代碼是正確的。

這是調用代碼的方式。

$(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);
}
});

Answer 1

您忘記了每個結尾處的) 。 語法正確時， .on()函數可以正常工作。

例

現有元素-

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

活動委托-

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

許多人將document用作捕獲冒泡事件的地方，但是並沒有必要將DOM樹放在那上面。 理想情況下， 您應該委派給頁面加載時存在的最接近的父級。

Answer 2

你錯過了結帳

);

現在工作。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="antennaCursor">Click</div> 

Answer 3

如果該元素是動態添加的，則您將需要此語法來確保該元素觸發該函數。

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

這與您的上一個建議相同，但使用on代替live 。 此外，您錯過了決賽)

因此，在您的情況下將是：

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

Answer 4

這只是一個錯字。 其他答案並非100％正確，它們的工作方式與“實時”並不完全相同。這應該可以按預期進行，無論現在還是將來都將發生

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