jquery.on（「click」）doens't工作正如我所料

我正在構建一個web應用程序。這個Web應用程序的主要導航使用jquery刷新，但刷新後，jquery事件不起作用。jquery.on（「click」）doens't工作正如我所料

「on button」有一個綁定到它的jQuery事件.on並且每次點擊它都會附加一段。「重置按鈕」添加了另一個「on按鈕」，但jquery事件不適用於它。

我已經使用了.on方法來規避當文檔準備就緒時第二個「開啓按鈕」不在DOM中。

這裏是一個簡單的例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>blub</title> 

<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".reset").click(function() { 
      $("nav").append('<button class="on">test</button>'); 
     }) 

     var count = 0; 
     $(".on").on("click", function(){ 
      $(".cont").append("<p>Another paragraph! "+(++count)+"</p>"); 
     }); 

    }); 
</script> 
</head> 

<body> 
    <button class="reset">reset</button> 
    <nav> 
     <button class="on">test</button> 
    </nav> 
    <div class="cont"></div> 
<script> 

</script> 
</body> 
</html>

來源

2013-03-12 arkhon

.on ISN」直接替換.live，它的語法稍有不同。如果你想影響添加到DOM後面的元素，你需要使用這樣的：

$(document).on('click', '.on', function(){ 
});

來源

2013-03-12 20:35:50

啊是的，我試圖使用它像.live。非常感謝你 – arkhon 2013-03-12 20:52:44

不客氣！很高興我能幫上忙：） – 2013-03-12 21:02:36

的問題是熱的你「」使用方法試試這個：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".reset").click(function() { 
      $("nav").append('<button class="on">test</button>'); 
     }) 

     var count = 0; 
     $(document).on("click",".on", function(){ 
      $(".cont").append("<p>Another paragraph! "+(++count)+"</p>"); 
     }); 

    }); 
</script>

DEMO

來源

2013-03-12 20:34:44

你也可以做到這一點很簡單，就是這樣 - 這樣的點擊處理程序被分配給每個按鈕它被創建。

$(document).ready(function() { 

    var count = 0; 

    $(".reset").click(function() { 
     $("nav").append($('<button>', { 
      class: 'on', 
      html: 'test', 
      click: function() { 
       $('.cont').append('<p>Another paragraph! ' + (++count) + '</p>'); 
      } 
     })); 
    }); 
});

來源

2013-03-12 20:48:23

jquery.on（「click」）doens't工作正如我所料

回答

相關問題