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 Benítez León · Accepted Answer · 2012-11-23 20:42:03Z

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, 2012 at 20:42

answered Nov 23, 2012 at 17:58

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

duduklein Over a year ago

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

Nelson Benítez León Over a year ago

I'm glad my answer could be of any help with your problem.

Jai · Accepted Answer · 2012-11-23 19:01:43Z

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, 2012 at 19:01

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

AaronS Over a year ago

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().

duduklein Over a year ago

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.

Community · Accepted Answer · 2017-05-23 10:24:43Z

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, 2017 at 10:24

CommunityBot

11 silver badge

answered Nov 23, 2012 at 20:38

duduklein

10.7k12 gold badges48 silver badges55 bronze badges

Collectives™ on Stack Overflow

Javascript/jquery .click() not triggering function

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related