Javascript/jquery .click() not triggering function

Question

I have a table where some functions are triggered upon clicks on a link in each row:

The relevant part of the code is:

$('.my_table').inplacerowedit({
     url: myurl,
    });

in inplacerowedit.js file, I have:

(function($) {
    $.fn.inplacerowedit = function(options) {
        var ops = $.extend({}, $.fn.inplacerowedit.defaults, options);
        $(this).find(ops.editbuttonselector).on('click', function(e) {
    ... }

ops.editbuttonselector = 'a.edit'

My table has an edit link each row and it's usually working fine. My problem is with new created rows.

Here is how I'm creating a row and adding it to the table:

    new_row = null

    getNewRow = function() {
        if (new_row == null){
            new_row = $("<tr>");
            columns = {'name':'','type':'','value':'','edit':'','delete':''}
            for (var column in columns)
                new_row.append( $("<td>").addClass(column).text(columns[column]));
            links = ['edit','delete']
            for (var i=0;i<links.length;i++){
                link = links[i]
                a = $("<a href='"+link+"' class='"+link+"'>").text(link);
                new_row.find("."+link).append(a)
            }
        }
        return new_row
    };

    $("#addRowAndEdit").click(function(e){
        e.preventDefault();
           var row = getNewRow();
           $(".my_table").append(row);
           new_record = $('.my_table tbody>tr:last');
           new_record.find('a.edit').click(); //this is the line that is not working.
           ....
    }

UPDATE:

If I do new_record.find('a.edit').on('click', alert('ok')); , the alert funcion works, but the other one is not called.

Any ideas? Thanks

Answer 1

Use event delegation so your new added rows are handled by a handler attached to the table, instead of attaching it to each individual a element, for that, replace the following line in inplacerowedit.js :

$(this).find(ops.editbuttonselector).on('click', function(e) {

for this one:

$(this).on('click', ops.editbuttonselector, function(e) {

EDITED

Answer 2

If you are using latest jquery versions of 1.6+ then you should try this:

new_record.find('a.edit').live('click',function(){
    // All your desired stuff here
});

try and see if this works for you.

Just because you are dynamically creating the rows , for this kind of situation .live() event handler is useful.

you can find more information here: http://api.jquery.com/live/

Answer 3

I had to make 2 changes: One as suggested by nelson (for some reason, the first time I tried his suggestion, it had broken the existing links) and another one like this: new_record.find('a.edit')[0].click()

I found the answer at https://stackoverflow.com/a/12110482/210481