[SOLVED] bind click to an element within panzoom container

bind click to an element within panzoom container

I'm using jquery.panzoom to contain a table.

Each table cell is in this form:

<td><div class="cell" id="cell-24-14"></div></td>

The table is created dynamically, so I use this to try and catch an event:

$('.cell').on('click', function (e) {        
        alert($(this).attr('id'));
});

I've tried removing the divs, and catching the clicks on the td's directly, but this didn't work as well.
When I'm catching clicks on any div, I see that the containers of the table are catching the clicks, but the clicks never get to the table itself (and not to its cells).

How do I catch click events on an individual div inside a td (or even a td)?

Solution

You can actually move your event binding to the function where these elements are added to DOM like this

function appendToDOM(){
   // creating a td element and appending to DOM
    var td = $('<td><div class="cell" id="cell-24-14"></div></td>');
    td.appendTo($table);

   /* now that the element is available in DOM, you can define you event handler here*/

    $('.cell').on('click', function (e) {        
       alert($(this).attr('id'));
    });
}

The problem with this approach is you're defining an event handler for every .cell element in your table, you can do better by using delegation.

$('urClosestStaticParent').on('click','.cell',function(e){
    alert($(this).attr('id'));
});

You can call this code just before you're displaying the table, like a finishing touch :)

When I say closest static parent, i'm talking about the parent of the dynamic table that you're creating, probably a div container which is there from the document load. If you don't have any such element, you can try adding some empty div in your html, append your table to that and use that, if not use document instead.