jQuery附加按鈕單擊事件處理程序不工作

我是jquery的新手，我有一個按鈕單擊事件，它運行良好，但是當我使用append（）將附加按鈕在div內。單擊事件不起作用jQuery附加按鈕單擊事件處理程序不工作

我下面的代碼：

$('#button').click(function() { 
    alert('works'); 
    $('#element').show("slow"); 
});

來源

2017-09-05 Wis

我覺得我今天正在downvoted因爲個人原因，這是第二個答案是正確的，但donwvoted，另一種被接受，但拿下'-1'，這一個是正確的，得分'-2'！ WTH。 –

我upvoted你的答案。我不知道人們有什麼問題。 – Huelfe

@Huelfe謝謝，有些人以對其他人的帖子進行投票而感到自豪。 –

你必須使用jQuery event-delegation： -

$(document).on('click', "#button", function() { 
    alert('works'); 
    $('#element').show("slow"); 
});

工作例如： -

$('#append_button_dynamically').append("<button id='button'>ClickMe</button>"); 
 

 
$(document).on('click', "#button", function() { 
 
    alert('works'); 
 
    $('#element').show("slow"); 
 
});

#element{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="append_button_dynamically"></div> 
 

 
<div id="element">This is hide but will show on button click</div>

來源

2017-09-05 12:33:34

你可能做的是，在DOM中存在的元素之前。您應該可以在</body>而不是<head>標記之前使用腳本。

來源

2017-09-05 12:33:29

因爲按鈕是動態創建的，它不能被觸發「本身」而是通過一個靜態元素來觸發它，例如<body>：

$('body').on('click', '#button', function() { 
    alert('works'); 
    $('#element').show("slow"); 
});

來源

2017-09-05 12:34:00

您需要在其中添加幾行！

$(document).ready(function(){ 
    $('#button').click(function() { 
      alert('works'); 
      $('#element').show("slow"); 
    }); 
});

來源

2017-09-05 12:34:59 JaTurna

您的代碼必須工作。您可能忘記包含JQuery文件。檢查附加的代碼片段。

$('#container').append("<button id='button'>Button</button>"); 
 
$('#button').click(function() { 
 
    alert('works'); 
 
    $('#element').show("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'>Button here</div>

來源

2017-09-05 12:35:34

jQuery附加按鈕單擊事件處理程序不工作

回答

相關問題