on（）函數在jquery中不起作用

Question

我正在使用jQuery製作動態按鈕。現在我想用這個按鈕作爲其他按鈕。這是我的HTML：

<label class='twobuttons'><div id="submit-button" >GO!</div></label> 
<div id='result'></div> 

這裏是我的JavaScript：

$(document).ready(function(){ 
    $('#submit-button').click(function(){ 
     $('#result').append("<label><div id='share' class='longbutton'>Share this route</div></label>"); 

     $('#result').append("<label><div id='goback' class='longbutton'>Create another one !</div></label>"); 
    }); 

    $('#share').on("click",function(){ 
     alert('hi'); 
    }); 

    $('#goback').on("click",function(){ 
     alert('hello'); 
    }) 
}); 

我專門有與$('#share').on(部分的麻煩。

我試着on()函數建議here。但它不起作用。 Here是我的代碼的小提琴。如果我在某個地方錯了，請糾正我。

Answer 1

這不是.on()的工作原理，如果您要動態創建元素，則無法將事件處理程序綁定到它，因爲在代碼運行時（document.ready），該元素不存在。因此，要「避開」，你的事件綁定到父元素（存在），然後添加你會點擊爲這樣的參數實際元素：

$('body').on("click", "#share", function(){ 
     alert('hi'); 
    }); 

    $('body').on("click", "#goback",function(){ 
    alert('hello'); 
    }) 

DEMO

Answer 2

.on（）方法的工作方式根據您的使用方式而改變。在你的例子中.on（）方法的行爲類似於綁定，並且僅適用於已存在的元素。
試試這個：

$(document).on("click",'#share',function(){ 
       alert('hi'); 
      }); 

DEMO

Answer 3

這是不夠用.on()。你必須使用事件代表團在你的動態創建的元素存在的元素（如document）：

$(document).on('click', '#share', function() { 
    alert('hi'); 
}); 

（根據你的小提琴，你可以使用#result代替document）

Fiddle

Answer 4

您應該在#result上設置事件委派，因爲當您嘗試設置#share上的點擊處理程序時，元素本身尚未添加。

$('#result').on('click', '#share', function() { 
    // your code here 
}); 

儘量不要到事件處理程序綁定到$(document)默認;最接近的元素不會被刪除是主要的候選人。

或者，您只需在之後綁定點擊處理程序即可添加新元素。

更新

你在你的按鈕的每次點擊附加有固定標識的元素;請注意，每個文檔的標識符應該是唯一的，因此您應該確保該操作至多執行一次。