1

I have some javascript that successfully clones a template and appends the resulting html to a div. However when I try to reference an element of the clone it is not accessible, even though if I place the exact same element with the exact same ID (confirmed with Firebug) outside the template (and the cloning system) it is accessible. I believe I need to do an update of some kind after cloning but I am not sure. The code I am trying to use to access the (cloned) element (does not log anything to console and is not working) is:

$("#depminusbutton0").on("click", function () {
    console.log('I triggered minus 0');
});

And depminusbutton0 shows up like this in firebug inspect element once cloned (doesn't exist prior to cloning, as ID 0 is inserted dynamically:

<a id="depminusbutton0">

Any ideas how I can make this element accessible?

edencorbin
  • 2,569
  • 5
  • 29
  • 44

3 Answers3

4

Two possibilities I can think of:

  1. You are installing the event handler before the element exists so it can't find the element to attach the event handler to?
  2. You have a conflicting ID elsewhere in the document.

If you're going to use this form of event handling:

$("#depminusbutton0").on("click", fn);

Then, the #depminusbutton0 element must exist at the time you run that line of code. It will search the DOM for that element at the time you run the code and will not hook up to an element that matches that ID that you create in the future.

You can work around that issue, either by running that line of code AFTER you create the #depminusbutton0 element and insert it in the DOM or you can switch to use delegated event handling which attaches the event handler to a common parent that does exist before you've created the child element.

To see more about how delegated event handling works, see these references:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

The general idea would be like this:

$(some parent selector).on("click", "#depminusbutton0", fn);

If you have multiple elements with the #depminusbutton0 id, then you will have to fix that and only have one element with that id. Often times with clones, you want to use a class name rather than an id since you can have multiple elements with the same class name.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    #1 was the answer, I had the event handler code installed prior to creating the incremented buttons. I moved that code creation into the creation template of the button, which also reduced total code, and it works like a charm. I would upvote you if I could but do not have enough reputation to do so. – edencorbin Oct 10 '14 at 15:24
  • @bobbydoogle - you can select a "best answer" by checking the green check mark to the left of the answer that helped you the most. This will also earn you some reputation points for following the procedure here and reward the person who provided the answer. – jfriend00 Oct 10 '14 at 15:58
1

Are you attaching the event to an element that doesn't exist yet? As described in the jQuery documentation:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Just make sure you are attaching the event to the cloned element after you create it.

Chad Hedgcock
  • 11,125
  • 3
  • 36
  • 44
0
$(document).on('click', '.class-or-id-name', function() {
    console.log("Heyyy its clickable");
    // do more stuff
});
Doddanna D
  • 31
  • 4