updating page with jquery renders javascript function useless?

Question

I have this page where the user select an item and a php file will return a table with a few buttons on each cell but when I click on it the js function is not called.

this is the js function

$('#deleteRow').on('click',function(evt)
{
    console.log('triggered');

}
);

This is the php echo

echo "
<tr>
  <td>$name</td>
  <td>$startData  $startTime</td>
  <td>$endDate $endTime</td>
  <td id='action-buttons'><button type='button' class='btn btn-primary pull-right'  id='deleteRow' ><i class='glyphicon glyphicon-trash'></i> </button></td>
  <td id='action-buttons'><button class='btn btn-primary pull-right' data-toggle='modal' data-target='#myModal'><i class='glyphicon glyphicon-edit'></i> </button></td>
   <td><label id='1'><input id='check' type='checkbox' name='switch' class='checkbox' $activeBool /><div class='switch' ></div></label></td>
</tr>


";

and this is the way I place it on the page (this is the success function fo the ajax post)

 success: function(result){
               $('#content-table tbody').html(result);

             }
             });

I have no idea why this is happening.

good call it was javascript

Jean Pierre
– Jean Pierre

2016-10-08 23:25:53 +00:00
Commented Oct 8, 2016 at 23:25 — Jean Pierre
– Jean Pierre, Commented Oct 8, 2016 at 23:25

bytesarelife · Accepted Answer · 2016-10-08 23:05:29Z

2

You are registering the click event on something that doesn't exists yet.

Try this:

$(document.body).on('click','#deleteRow',function(evt)
{
    console.log('triggered');
});

Update:

As ratiorick mentioned, if you have a same id name and you want to get the handle of the one that you actually clicked, you can do something like this:

$(document.body).on('click','button[id^=delete]',function(evt)
{
    console.log('triggered');
});

'button[id^=delete]' basically says that every button whose id stars with delete.

edited Oct 8, 2016 at 23:05

answered Oct 8, 2016 at 22:38

bytesarelife

4143 silver badges10 bronze badges

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

5 Comments

Jean Pierre Over a year ago

Thanks man that worked. I guess it was something like that. :)

bytesarelife Over a year ago

No worries! Glad I could help :)

ratiorick Over a year ago

I doubt that will work as you expect - check my post below .. Just trying to save you a few headaches as you will always end up deleting the last row. regardless of what button you press because of the ID ( jquery would just use the last found ) - If you only have 1 row, yes that will be fine, but i doubt that will be the case...

ratiorick Over a year ago

That will work, but i still think the best solution would be to use a class. With that beign said, this is solution to get around the issue if you had no other choice, so i will up vote this one.

Jean Pierre Over a year ago

it's actually working perfectly I actually set the the row id to the button and that way I can pass it to the php file as for security concerns it one id of many.

ratiorick · Accepted Answer · 2016-10-08 23:00:34Z

0

You have a few issues.... 1 is that you are using an ID - in a place where you should be using a class... Change "#deleteRow" to ".deleteRow" - you could just bind the event handler in the success callback function like so update the HTML TO this ( you should only use ID if there is 1 element ) otherwise use a class...

Update the HTML - ( also update the rest of these duplicated IDs )

  <td id='action-buttons'><button type='button' class='btn btn-primary pull-right deleteRow' >

And then attach the event handler in the callback function

success : function(result){
    $('#content-table tbody').html(result);
    $('.deleteRow').on('click',function(evt){
        console.log('Is it working now?'); 
    });
}

edited Oct 8, 2016 at 23:00

answered Oct 8, 2016 at 22:52

ratiorick

7765 silver badges8 bronze badges

5 Comments

Jean Pierre Over a year ago

Is the proper way to uses a class for this? then what are id normally used for? thanks for the help.

ratiorick Over a year ago

An Id should be used when there is only a single element and that ID is unique... You will most likely end up with hard to find bugs if you start using Ids and duplicating them on the page.

bytesarelife Over a year ago

This would still remove or trigger the last one if that is what you were trying to avoid with this solution.

ratiorick Over a year ago

If you are going to try to output something like you are, and targeting a group of elements - you should use a class instead.

ratiorick Over a year ago

how do you figure that? I was just commenting that there were more than just the issue of binding the event before it existed on the page.

Collectives™ on Stack Overflow

updating page with jquery renders javascript function useless?

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related