單擊元素時發生的問題，使用.html添加到頁面（）

所以，我在單擊由jQuery的.html（）函數呈現的元素上的事件時遇到了問題。這裏是我的代碼，我與測試：單擊元素時發生的問題，使用.html添加到頁面（）

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" src="static/jquery-2.0.3.min.js"></script> 
</head> 
<body> 
    <div id="content"> 
     <input type="submit" name="loginButton" id="loginButtonID"/> 
    </div> 
    <script> 
     $('#loginButtonID').click(function() { 
      $('#content').html('<button name="loginButton" id="newPasswordID">New Button</button>') 
     }); 
     $('#newPasswordID').on('click', function() { 
      alert("alert"); 
     }); 
    </script> 
</body> 
</html>

正如你所看到的，在開始的時候，我渲染id="loginButtonID"按鈕。我有.click()事件，它創建了另一個按鈕.html()（因爲.text()將返回該按鈕的HTML代碼）與id="newPasswordID"和該按鈕我有另一個事件.on()它應該是（不是.click()），但該事件不起作用。所以問題是：如何使.on()事件適用於第二個按鈕？

謝謝。

來源

2013-12-08 Aleksei Sorokin

問題在於#newPasswordID元素不存在截至您嘗試掛鉤事件時。因此，當你做$("#newPasswordID")它不匹配任何東西，沒有處理程序設置。

你可以做到這一點後，你渲染元素，或者您也可以勾上一些容器的元素進去（貌似#content）事件，並使用事件委派：

$("#content").on("click", "#newPasswordID", function() { 
    // ... 
});

由於真正掛鉤click,#content，但只有當事件通過匹配#newPasswordID的元素時纔會觸發它，在連接事件時是否存在#newPasswordID並不重要。

來源

2013-12-08 21:54:25

謝謝:)解釋行之有效！ –

試試這個：

$('#content').html(
    $('<button />').attr('name',"loginButton") 
     .attr('id', "newPasswordID") 
     .click(function() { 
      alert('alert'); 
     }) 
);

來源

2013-12-08 21:59:40

單擊元素時發生的問題，使用.html添加到頁面（）

回答

相關問題