Question

我想将点击事件附加到尚未添加到DOM的对象here。

我使用了code from the answer，但点击任何内容都没有任何反应。

这是我的HTML：

<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
    <a href="#">asl;kdfjl</a>
    <div id="my-button">sdgdf</div>
</body>
</html>

JavaScripts位于这些位置，我可以在Chrome中的“来源”标签中看到它们。

我的file.js内容完全是从jsfiddle复制粘贴的：

$('body').on('click','a',function(e){
    e.preventDefault();
    createMyButton();
});

createMyButton = function(data) {    
    $('a').after('<div id="my-button">test</div>');        
};

$('body').on('click','#my-button',function (e) {
      alert("yeahhhh!!! but this doesn't work for me :(");
});

Answer 1

由于您的代码位于head标记中，因此您需要使用DOM ready包装器来确保在DOM呈现元素后执行代码。

jsfiddle没有它，因为小提琴设置为已经运行代码onload。

$(function(){
    $('body').on('click','a',function(e){
        e.preventDefault();
        createMyButton();
    });

    createMyButton = function(data) {    
        $('a').after('<div id="my-button">test</div>');        
    };

    $('body').on('click','#my-button',function (e) {
         alert("yeahhhh!!! but this doesn't work for me :(");
    });
});

Answer 2

您的代码使用代码段.Better与document.ready一起使用。在document.ready之后发布js。并更改选择器document而不是body

$(document).ready(function() {

  $(document).on('click', 'a', function(e) {
    e.preventDefault();
    createMyButton();
  });

  createMyButton = function(data) {
    $('a').after('<div id="my-button">test</div>');
  };

  $(document).on('click', '#my-button', function(e) {
    alert("yeahhhh!!! but this doesn't work for me :(");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">asl;kdfjl</a>
<div id="my-button">sdgdf</div>

附加点击事件不会起作用

2 个答案: