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

我正在使用jQuery製作動態按鈕。現在我想用這個按鈕作爲其他按鈕。這是我的HTML：on（）函數在jquery中不起作用

<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是我的代碼的小提琴。如果我在某個地方錯了，請糾正我。

來源

2013-06-11 user1263375

ID必須是唯一的。你需要將一個委託選擇器傳遞給'on（）';請參閱文檔。 – SLaks

你是如何創建「動態按鈕」的。 '.on（）'聲明 – DaveHogan

檢查提琴 – user1263375

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

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

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

DEMO

來源

2013-06-11 15:38:00 Andy

'.on（）'應該用於附加事件處理程序，無論動態創建與否。 http://api.jquery.com/on/ – Jack

@Andy我認爲傑克指的是你說'那不是.on（）工作方式，並且暗示你必須總是把事件綁定到父元素，然後添加您將要點擊的實際元素作爲參數。因爲這不是必需的。 – Ian

@Ian這是正確的。 – Jack

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

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

DEMO

來源

2013-06-11 15:38:03

爲什麼downvoted？請解釋 –

看起來我們可能有一個序列downvoter。我也被低估了，沒有給出任何解釋。 –

Greate隨機downvotes @DerekHenderson –

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

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

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

Fiddle

來源

2013-06-11 15:38:08

我試過了。不工作。你可以張貼一些小提琴嗎？ – user1263375

是的，它正在工作，但我會用小提琴更新以向您證明。 –

@ user1263375，我現在用小提琴更新了我的答案。 –

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

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

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

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

更新

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

來源

2013-06-11 15:39:26

這是爲什麼downvoted兩次？ –

@BenjaminGruenbaum，我認爲我們有一個系列downvoter。我們似乎都被低估了。 –

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

回答

相關問題