jQuery functions not working after JS innerHTML property

Question

I am using this code in my application:

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

The #inventory_box element is present already, so it just spews out the IMG into #inventory_box.

What I want is to be able to click this appeared IMG with id name test, but won't work like:

$("#test").click(function() {
                // Run this
            });

try on instead if ur using latest version of jquery.. – codebreaker Oct 07 '13 at 11:51 — codebreaker, Oct 07 '13 at 11:51

score 3 · Answer 1 · answered Oct 07 '13 at 11:49

3

Try this,

$(document).on('click',"#test",function() {
    alert('test');
});

Read on()

answered Oct 07 '13 at 11:49

Rohan Kumar

40,431
11
76
106

score 1 · Answer 2 · answered Oct 07 '13 at 11:49

1

Since the image is added dynamically, you need to use event delegation to register the event handler

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#inventory_box').on('click', '#test', function() {
      // Run this
});

This will attach your event to test image element within the #inventory_box element, reducing the scope of having to check the whole document element tree and increasing efficiency.

answered Oct 07 '13 at 11:49

palaѕн

72,112
17
116
136

1

Thanks, but this does not seem to be working. The one by Rohan seems to work for me...will using the one by Rohan slow performance down? – Naoto Ida Oct 07 '13 at 12:08
Yes, incase you don't have a nearest parent selector (already present in the DOM), you will have to use the `document` element. Only thing being, the code will check the whole document element tree for the new image being added, which takes some time! – palaѕн Oct 07 '13 at 12:11

score 1 · Answer 3 · answered Oct 07 '13 at 12:24

Consider using 'append' instead of innerHTML. Using a mix of vanilla JavaScript & jQuery seems to be causing some delay in updating the DOM with the new element. The code below works for me.

$("#inventory_box").append("<img src='./img/rock.gif' id='test' />")

$('#test').click(function(d){console.log("clicked!");});

score 0 · Answer 4 · answered Oct 07 '13 at 11:58

Your assignment of event handler runs before there is an element having such id, so after you create an element, it will not have any event handler assigned to it.

As it was suggested, easiest way to solve this common javascript error, you can assign event to a container DOM element and use jquery's event delegation to fire events on event newly added DOM elements.

But I rather not use this approach, the reason I can not give you, say, I just simply prefer not to.

Always assign events after element is created. for example:

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

immediately after this, execute this:

$("#test").click(function() {
                // Run this
            });

score 0 · Answer 5 · answered Oct 07 '13 at 12:10

0

$('#inventory_box img').click(function() {
      // Run this
});

answered Oct 07 '13 at 12:10

Anup

3,283
1
28
37

jQuery functions not working after JS innerHTML property

5 Answers5

Linked