如何检测/选择从JavaScript / JQuery创建的元素？ [英] How to detect/select elements created from JavaScript/JQuery?

问题描述

我想通过点击一个由JS代码创建的元素来 Show-Hide 一个元素。但由于某些原因 getElementById 和 getElementsByClassName 无法选择这些HTML元素。 （请查看演示： http://jsfiddle.net/vy09nnco/ ）

以下是HTML代码：

 < div id =toShow> Hello World ！< / DIV> 
< div id =container>< / div> 
  

创建< p> 元素它将用于Show-Hide）和将附加到容器 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'）; //这是问题
 var isOpenedClass ='isOpened '; 
 var formIsClosed = true; 
 $ b $（clickMeDiv）.click（function（）{
 $（divToShow）.toggleClass（isOpenedClass）; 
 formIsClosed = false; 
））; 
 $（clickMeDiv）.click（function（）{$ b $ if（formIsClosed）{
 $（divToShow）.removeClass（isOpenedClass）; 
} 
 formIsClosed = true; 
}）
 $（'＃container'）。append（code）; 
}）; 
  

当我使用Show-Hide的另一个元素时，它很好用（例如： http://jsfiddle.net/vy09nnco/1/ ），这就是为什么它只是通过选择创建的代码。

感谢您的帮助。

在页面加载后创建元素，所以它不在DOM中，因此没有连接到它的监听器。您可以将事件侦听器添加到 body （或父元素或某个元素）以查找新创建的元素：

（$code> $（body）。on（click，clickMeDiv，function（）{

而不是

$ $ p $ $（clickMeDiv）.click（function（）{

FIDDLE

由于您使用的是Jquery，所以真的没有理由使用vanilla Javascript。您可以这样做少了很多代码：

FIDDLE

I want to Show-Hide an element by clicking on an element that was created from JS code. But for some reason getElementById and getElementsByClassName not work to select these HTML elements. (Please check the Demo: http://jsfiddle.net/vy09nnco/)

Here is the HTML code:

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

Creating the <p> element (which will be used to Show-Hide) and appending to the container div:

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

Here is the complete JQuery code:

$(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);    
}); 

When I use another element to Show-Hide, it works good (example: http://jsfiddle.net/vy09nnco/1/), that is why the problem it's only by selecting the created code.

Thanks for any help.

解决方案

it's because you're creating the element after the page loads so it's not in the DOM thus does not have a listener attached to it. You can add an event listener to the body (or a parent element or something) to look for the newly created element:

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

instead of

$(clickMeDiv).click(function() {

FIDDLE

Since you're using Jquery anyways there really isnt a reason to use vanilla Javascript. You can do soemthing like this with a lot less code:

FIDDLE

这篇关于如何检测/选择从JavaScript / JQuery创建的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！