javascript - 如何检测/选择从 JavaScript/JQuery 创建的元素？

Question

我想要Show-Hide通过单击从 JS 代码创建的元素来创建元素。但由于某种原因getElementById和getElementsByClassName无法选择这些 HTML 元素。 (请查看演示:http://jsfiddle.net/vy09nnco/)

这是 HTML 代码:

<div id="toShow">Hello World!</div>
<div id="container"></div>

创建<p>元素(将用于显示隐藏)和 appending到容器div :

var code = '<p class="click-me">Click Me!</p>';
$('#container').append(code);

这是完整的 JQuery 代码:

$(document).ready(function () {    
    var code = '<p class="click-me">Click Me!</p>';     
    var divToShow = document.getElementById('toShow');
    var clickMeDiv = document.getElementsByClassName('click-me'); // Here is the problem
    var isOpenedClass = 'isOpened';
    var formIsClosed = true;

    $(clickMeDiv).click(function() {
        $(divToShow).toggleClass(isOpenedClass);
        formIsClosed = false;
    });
    $(clickMeDiv).click(function() {
        if (formIsClosed) {
            $(divToShow).removeClass(isOpenedClass);
        }
        formIsClosed = true;
    })      
    $('#container').append(code);    
}); 

当我使用另一个元素来显示隐藏时，它效果很好(例如: http://jsfiddle.net/vy09nnco/1/ )，这就是为什么问题仅在于选择创建的代码。

感谢您的帮助。

Answer 1

这是因为您在页面加载后创建元素，因此它不在 DOM 中，因此没有附加监听器。您可以向 body (或父元素或其他元素)添加事件监听器以查找新创建的元素:

$("body").on("click", clickMeDiv, function() {

而不是

$(clickMeDiv).click(function() {

FIDDLE

既然你无论如何都在使用 Jquery，那么确实没有理由使用普通的 Javascript。您可以用更少的代码来做这样的事情:

FIDDLE