How to detect/select elements created from JavaScript/JQuery?

Question

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.

The element is not in the document yet see the difference here. — Wilmer
– Wilmer, Commented Dec 25, 2014 at 21:26
If you use DOM objects instead of innerhtml for creating the new elements you then have a direct reference to the element and can then attach event listeners directly. — Jasen
– Jasen, Commented Dec 25, 2014 at 21:30
You are trying to add a listener before the object exists in the DOM, just append it first, or create the listeners on the append callback. — Sebastián Espinosa
– Sebastián Espinosa, Commented Dec 26, 2014 at 1:38
Thanks everyone people! You are right, the problem was in the order of the functions!! — csr-nontol
– csr-nontol, Commented Dec 29, 2014 at 0:27

jmore009 · Accepted Answer · 2014-12-25 21:37:05Z

1

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

edited Dec 25, 2014 at 21:37

answered Dec 25, 2014 at 21:19

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

csr-nontol Over a year ago

but why now by clicking on the shown div (toShow) it hide it too?

csr-nontol Over a year ago

It works good! Thanks for your time. Please, Can you explain me about slideToggle(100)? And How to identify when the div is opened or closed?

jmore009 Over a year ago

@CésarNontol Yeah, so slideToggle() will show your element by "sliding" down and up depending on what state it is currently in (hidden or shown). the 100 is simply the speed (1000 being a second). If is a div is hidden, it's closed. Does that help?

JRulle · Accepted Answer · 2014-12-25 21:22:43Z

1

You need to append the element to the DOM before setting up your click event handlers. See the reordered JavaScript below.

$(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;
    $('#container').append(code);   //moved up this line

    $(clickMeDiv).click(function() {
        $(divToShow).toggleClass(isOpenedClass);
        formIsClosed = false;
    });
    $(clickMeDiv).click(function() {
        if (formIsClosed) {
            $(divToShow).removeClass(isOpenedClass);
        }
        formIsClosed = true;
    });    
});

answered Dec 25, 2014 at 21:22

JRulle

7,5666 gold badges42 silver badges63 bronze badges

1 Comment

csr-nontol Over a year ago

Thank you! I got it. The problem was in the order of the functions.

Collectives™ on Stack Overflow

How to detect/select elements created from JavaScript/JQuery?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related