如何在點擊一個按鈕時調用某個功能？

Question

我最近開始玩javascript的樂趣。 我通過大部分w3schools教程（包括jquery ofc）工作。

我卡住的地方只需點擊一個按鈕即可調用一個函數。

我的代碼（編輯提供一個最小的，完整的和可驗證的例子）

$("#linkId1").on("click", function(){ 

    setTimeout(function(){ 

    function decryptText() { 
    alert("decrypted!"); 
    } 

    $("tableId").append('<a id="decryptID" class="button">decrypt</a>'); 
    $("#decryptID").on("click", decryptText); 

    }, 500); 
}); 

HTML：

<a id="linkId1">firstLink</a> 

<table> 
<tbody> 
    <tr> 
    <td id="tableId"> 
    <a id="button1" class="button"></a> 
    <a id="button2" class="button"></a> 
    </td> 
    </tr> 
</tbody> 
</table> 

這裏就是我已經嘗試過：

• 調用函數的不同方法

• 製作功能decryptText（）全局或局部

• - 創建它（因爲我在另一篇文章，這是更好地使用eventListener 不是將onclick屬性在閱讀後添加一個eventListener到按鈕HTML標籤）。〜我混合 基本的js與jQuery方法在這裏 - 大錯誤。

瀏覽器控制檯沒有給我任何錯誤 - 當我改變編寫了一下，我得到：Reference Error: decryptText() not defined

S.

編輯： 我試圖做這一切僅在jQuery中，選擇器和事件處理。如你所見，我將示例代碼更改爲簡單的加密和解密腳本的開始 - 核心問題仍然保持不變。

使用Firefox檢查器工具進行檢查，這次該元素沒有綁定任何事件。

A的信息可能是重要的一條是，之前onclick ajax handler從元件#linkId1打來電話，插入包含表到HTML整個DIV，你可以在HTML看錶不存在。

Answer 1

我將爲您的問題提供替代解決方案。如果您創建的元素作爲一個完全成熟的jQuery，你把它添加到表之前，你可以單擊事件直接綁定到這個無需再次找到它：

var newA = $('<a\>').addClass('button').text('decrypt'); 
newA.on("click", decryptText); 
$("#tableId").append(newA); 

$('<a\>')將創建的DOM元素作爲變量在將附加到DOM之前。這裏比你現在的代碼的主要優點是，即使你有多個具有相同文本的元素（decrypt），這也可以保證該點擊被綁定到<a>標籤。我主要說這是因爲使用".button:contains('decrypt')"的選擇器非常模糊，如果您運行相同的代碼兩次，可能會匹配您不期望的事件或事件綁定處理程序兩次。

另一種選擇是使用泡沫代表團的事件：

$("#tableId").on('click', '.button', decryptText); 

事件處理程序被綁定到靜態項目tableId但它監聽匹配的底層階級button的事件。這是覆蓋通俗易懂的這裏Event binding on dynamically created elements?

通過以上你可以愉快地添加許多新<a>，只要你想在知識的安全，該事件結合已經處理了，即你不必爲創建綁定事件。

Answer 2

我解決了！ （感謝Cbroe & Se0ng11）

代碼之前：

​​

代碼之後：

$("#tableId").append('<a class="button">decrypt</a>'); 
$(".button:contains('decrypt')").on("click", decryptText); 

的問題是由靜態ID我分配給超級鏈接元件I追加創建（ ）在第1行。 刪除ID並更改第2行中的jQuery選擇器！

Answer 3

試試這個，你是缺少一些東西，$(document).ready(function() {}和$("tableId").append(...);應該使用#$("#tableId").append(...);因爲tableId是元素不是元素本身的ID。它將與W3c一起工作，它不像你不應該使用這個或那個，因爲你是初學者。你可以在任何地方使用。

$(document).ready(function() { 
 
     $("#linkId1").on("click", function() { 
 
     setTimeout(function() { 
 
     function decryptText() {alert("decrypted!"); 
 
     } 
 
     $("#tableId").append('<a id="decryptID" class="button">decrypt</a>'); 
 
     $("#decryptID").on("click", decryptText);}, 500);}); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table><tr><td> 
 
     <a id="linkId1">firstLink</a></td> 
 
    </tr> 
 
     <tr><td id="tableId"> 
 
      <a id="button1" class="button"></a> 
 
      <a id="button2" class="button"></a> 
 
      </td> 
 
     </tr> 
 
</table>