在使用文档时加载DOM后添加的按钮上没有运行JavaScript单击事件

Question

我有一个相当普遍的问题,我之前已经解决了数百次,但是现在我错过了一些东西或者它没有用.

我在这里做了一个简单的模型来演示JSFIddle上的问题:http: //jsfiddle.net/L9axv9cc/

基本上我有一些用于Button的HTML,在页面DOM已经加载之后创建并插入到页面DOM中.

然后我创建一个CLICK EVENT在DOM加载后生成的新按钮.

在过去,我一直能够使用$('document')点击事件处理DOM加载后添加的项目.

由于某种原因,这次它不适用于这个例子....

$('document').on('click', '#btn-reject-move-to-DraftingStage1', function(e) {
    alert('We just clicked a button that was created after the DOM had loaded and a new click event was attached to it after the page was fully loaded and working already!');
});

---

下面的例子如下.当您单击它生成的按钮并将我的新Button注入带有ID的DOM#btn-reject-move-to-DraftingStage1

接下来,如果您再单击该新按钮,它什么都不做!

所以我的Click vent没有附加到DOM加载后创建的项目.

请帮忙？

---

JSFiddle示例模型的完整代码

// click button to generate the button with ID #btn-reject-move-to-DraftingStage1 that is to be created after the DOM has loaded.  
$('#create-new-button-from-this-button-click').click(function(){
    
    // HTML for our new button that we are to create
	var newButtonHtml = '<input type="submit" value="Reject & Move to Backing Status Board" id="btn-reject-move-to-DraftingStage1" class="btn btn-primary">';
    
    // Insert HTML for the new button into this #fake-modal DIV
    $('#fake-modal').html(newButtonHtml);
    
    
    // Now attempt to attach a new click event onto the button that we just injected into the page DOM...
    // I used  $('document') on the click event below as that is how I generally handle
    // getting EVENTS to work on items that are added to the DOM after the DOM has been
    // built/loaded already. 
    $('document').on('click', '#btn-reject-move-to-DraftingStage1', function(e) {
        // run code when this button clicked on
        // this click event does not work!
        alert('We just clicked a button that was created after the DOM had loaded and a new click event was attached to it after the page was fully loaded and working already!');
    });
    
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="create-new-button-from-this-button-click" value="Insert new button HTML into DOM">
    
    
<div id="fake-modal">Fake Modal HTML</div>

Answer 1

不要使用字符串选择器,document是一个对象,应该这样访问.

$(document).on('click', '#btn-reject-move-to-DraftingStage1', 

// click button to generate the button with ID #btn-reject-move-to-DraftingStage1 that is to be created after the DOM has loaded.  
$('#create-new-button-from-this-button-click').click(function(){
    
    // HTML for our new button that we are to create
	var newButtonHtml = '<input type="submit" value="Reject & Move to Backing Status Board" id="btn-reject-move-to-DraftingStage1" class="btn btn-primary">';
    
    // Insert HTML for the new button into this #fake-modal DIV
    $('#fake-modal').html(newButtonHtml);
    
    
    // Now attempt to attach a new click event onto the button that we just injected into the page DOM...
    // I used  $('document') on the click event below as that is how I generally handle
    // getting EVENTS to work on items that are added to the DOM after the DOM has been
    // built/loaded already. 
    $(document).on('click', '#btn-reject-move-to-DraftingStage1', function(e) {
        // run code when this button clicked on
        // this click event does not work!
        alert('We just clicked a button that was created after the DOM had loaded and a new click event was attached to it after the page was fully loaded and working already!');
    });
    
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="create-new-button-from-this-button-click" value="Insert new button HTML into DOM">
    
    
<div id="fake-modal">Fake Modal HTML</div>