Question

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

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

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

然后我在DOM加载后生成的新按钮上创建CLICK EVENT。

过去，我始终能够使用$('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为#btn-reject-move-to-DraftingStage1

的DOM时

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

所以我的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',

＆＃13;

// 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!');
    });
    
    
    
});

＆＃13;

<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>

＆＃13;

Answer 2

文档是一个对象而不是标记/选择器，您应该按如下方式使用它：

$(document) //Remove the quotes around document.

使用文档

2 个答案: