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

Nelson · Answer 1 · 2012-11-23T20:42:03.723

3

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

edited Nov 23 '12 at 20:42

answered Nov 23 '12 at 17:58

Nelson

49,283
8
68
81

please edit your answer so I can vote up. SO is not allowing me to vote up. I had voted down wrongly. I'm sorry – duduklein Nov 23 '12 at 20:39
I'm glad my answer could be of any help with your problem. – Nelson Nov 23 '12 at 20:42

score 0 · Answer 2 · answered Nov 23 '12 at 19:01

0

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/

answered Nov 23 '12 at 19:01

Jai

74,255
12
74
103

That page you linked has this: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). – AaronS Nov 23 '12 at 19:06
The line that is not working is not the one the defines what happens when a click occurs, but the one that simulates the click itself. – duduklein Nov 23 '12 at 19:15

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

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

edited May 23 '17 at 10:24

Community

1
1

answered Nov 23 '12 at 20:38

duduklein

10,014
11
44
55

Javascript/jquery .click() not triggering function

3 Answers3