從jquery live切換到on不起作用

-1

我一直在使用活jquery方法很長一段時間，它一直在工作到目前爲止，但是我讀到我不贊成使用的實時方法並將其替換爲「on」。從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/ui/1.11.2/jquery-ui.min.js

沒有人有任何建議如何解決這一問題？

編輯：在這裏更新了代碼，因爲它缺少了一些末尾的parentheis和semi colon。不過，真正的代碼是正確的。

這是代碼的調用方式。

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

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

編輯：與我已經意識到，可能存在其它問題是根本原因與「上」的方法存在的問題的代碼的代碼工作。這是對代碼的更新。異常處理隨機拋出一個錯誤，說「TypeError：undefined不是函數」。在導致「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); 
} 
});

來源

2015-01-15 user1728363

你忘了關閉每個這些關閉)。當語法正確時，.on()函數可以正常工作。

example

現有元素 -

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

事件委託 -

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

許多使用document能趕上冒泡事件的地方，但沒有必要去說高高的DOM樹。理想的情況下you should delegate to the nearest parent that exists at the time of page load.

來源

2015-01-15 14:49:35

和分號的丟失周杰倫 – Billy

[分號]（http://stackoverflow.com/questions/2846283/什麼是規則的JavaScript的自動分號插入ASI）是可選的@比利。我總是把它們擺出習慣。 –

intresting，我不知道，雖然我知道在某些情況下，你可以把它們留在外面（只在函數中聲明等）。無論如何，我總是把它們放進去。 – Billy

你錯過了截止

現在

);

作品。

$(".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>

來源

2015-01-15 14:49:44 Billy

真正的代碼有「）;」。在問題中輸入代碼時，我只是錯過了它。 – user1728363

-1

這只是一個錯字。其他答案並非100％正確的，他們並不真正以同樣的方式作爲工作的「活」這應該按預期工作，與事件現在和將來

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

來源

2015-01-15 14:54:20

其他答案在使用'on（）'時完全正確。看看第一個例子[這裏]（http://api.jquery.com/on/） –

錯誤，另一個答案，期望新的答案比我自己的錯誤。他們只適用於已有的元素，而不適用於目前不存在的元素。稱爲「代表」事件，請點擊此處。 http://api.jquery.com/on/ –

OP顯示了兩個示例@BrainFooLong - 存在infg元素*和*委派的事件。結果是，OP在他的代碼中存在拼寫錯誤，一旦修復*他的代碼的兩個*版本將工作，如果他有現有元素*和*元素需要委派。另外，很多人使用'document'作爲捕捉冒泡事件的地方，但是沒有必要把它放在DOM樹上。理想情況下[你應該委託給頁面加載時存在的最近父母。]（http://stackoverflow.com/a/12824698/1011527） –

如果元素動態添加你將需要此語法來確保元素觸發該函數。

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

這是一樣的你最後的建議，但有on而不是live。另外你缺少最後)

所以你的情況應該是：

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

來源

2015-01-15 14:56:46 mikemjharris

從jquery live切換到on不起作用

回答

相關問題