Event handler not working for all elements

Question

I'm trying to find a way to assign event handlers to each box that I create dynamically. At the moment the user can click "Add above" or "Add below" and 2 rows of boxes will appear wherever they clicked.

I'm also trying to make it so that when the user clicks on a specific square, a colorPicker will pop up and that specific square's color can be changed.

For some reason though, the colorpicker only pops up when the user clicks on the first two rows of squares. If more rows are dynamically added below or above the current set, nothing happens when you click on the squares.

Does anyone know why this might be happening?

What I have done/tried so far :

http://codepen.io/anon/pen/bwBRmw

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)
function doSomething(e) {
   console.log("gets inside doSomething")
   console.log(e.target)
   console.log(e.currentTarget)
if (e.target !== e.currentTarget && e.target.id !== "") {
    var clickedItem = e.target.id;
    console.log("Clicked on " + clickedItem);
    var led = document.getElementById(clickedItem)

    if(!picker){
        console.log("new picker initialized")
        picker = new Picker(led)
    }
    else{
        console.log("gets inside else case")
        picker.settings.parent = led;
    }
    picker.show();

}
 picker.on_done = function(colour) {
    $(led).css('background-color',colour.rgba().toString());
    picker.hide()
    }

//e.stopPropagation();
}

You're using jQuery, wouldn't it be a lot easier to just use jQuery's built in abilty to do event delegation ? — adeneo, Sep 21 '16 at 21:27
The [documentation for `on`](http://api.jquery.com/on/) has a section about delegated events you might find edifying. — Heretic Monkey, Sep 21 '16 at 21:30
@adeneo When I do logs to the console, my program does detect being able to click on different squares, so I'm not sure why it isn't working properly. I added the event listener to the parent element, just as jquery would do. — blazerix, Sep 21 '16 at 21:30
@adeneo Thanks for the response! Do you know why the colorPicker is bound to the element that was clicked on for the very first time? — blazerix, Sep 21 '16 at 21:51

score 1 · Accepted Answer · answered Sep 21 '16 at 21:42

1

Try this on line 2:

$(document).on("click", ".container", doSomething);

answered Sep 21 '16 at 21:42

Brad Thiessen

553
1
4
13

Thanks for the response, but when I add a new row, nothing pops up – blazerix Sep 21 '16 at 21:45
Really? I replaced lines 1 and 2 in your code with the above and it works on all new rows. – Brad Thiessen Sep 21 '16 at 21:46
Could you link via codepen? – blazerix Sep 21 '16 at 21:47
http://codepen.io/brtlrt/pen/ORWPAj – Brad Thiessen Sep 21 '16 at 21:50
Do you know why the colorPicker is bound to the element that was clicked on for the very first time? I am always resetting the parent element. – blazerix Sep 21 '16 at 21:52
Because your binding it by ID (line 33ish in your pen) and that ID is not unique. – Brad Thiessen Sep 21 '16 at 22:03

score 0 · Answer 2 · answered Sep 21 '16 at 21:37

0

This may not solve all of your problems, but if you remove e.preventDefault();from the click:

 $("body").on('click', ".repeat", function (e) {
        e.preventDefault();

it will let you change colors on each of the newly created sections. Hope it helps?

answered Sep 21 '16 at 21:37

sean

1,220
9
8

Are you sure? I just added a new section below (after removing that line) and no color picker pops up – blazerix Sep 21 '16 at 21:40

Event handler not working for all elements

2 Answers2