Question

I have this:

$(document).on("click","#imgCancel",function(){
   $("#tbl_zones td").click(function(){
      editTables("#tbl_zones td",this)
   })
})

I’m trying to make the function more generic, so that it’ll work on multiple tables. imgCancel is inside the table, and there will be an imgCancel in all the tables I’m making.

I’ve considered to replace the second line like this:

$(document).on("click","#imgCancel",function(){
   $(this).closest('table').find('td').click(function(){
      editTables("#tbl_zones td",this)
   })
})

It didn’t work, though, and also I have no idea what to put as the first argument of editTables (which should refer to all td’s in the current table).

Edit:
Modifying jknaack’s jsfiddle, I ended up with this:

$(document).on("click","#imgCancel",function(){
    var tblID = $(this).closest('table').attr('id')
    $("#"+tblID+" td").click(function(){
        editTables("#"+tblID+" td",this)
    })
})

Answer 1

The problem is that a id must be unique in your document, use the class attribute instead.

w3c The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).

• w3c – ID Attribute