.click does not work for me

Question

I have many jquery functions in my script, but the specific one does not work, this is my function

$('#delete').click(function() { var id = $(this).val(); $.ajax({ type: 'post', url: 'update.php', data: 'action=delete&id=' + id , success: function(response) { $('#response').fadeOut('500').empty().fadeIn('500').append(response); $(this).parent('tr').slideUp('500').empty(); } }); }); 

a similar function like this one works

 <!-- WORKING FUNCTION --> $('#UpdateAll').click(function() { $.ajax({ type: 'post', url: 'update.php', data: 'action=updateAll', success: function(response) { $('#response').fadeOut('500').empty().fadeIn('500').append(response); $('#table').slideUp('1000').load('data.php #table', function() { $(this).hide().appendTo('#divContainer').slideDown('1000'); }); } }); }); 

I checked with firebug, the console does not show any errors, I checked the html source, the values ​​load correctly, I checked my php file 5 times, this is correct, cannot solve the problem. Please, help.

Answer 1

Instead of id = delete, I changed it to class = delete in html and in js ('. Delete') , and now it works fine, but when it tries again with id, it doesn't work.

Thanks to everyone for the help, I have no problem whether this is an id or a class, only the function works now.

Answer 2

I struggled with the EXACT ART OF THE PROBLEM for 6 hours in a row! the solution was to use jquery "live".

And it's all.

 $('#submit').live('click',function(){ ...code... }); 

Answer 3

With the first one, I would put a quick and nasty alert() in an anonymous click function to make sure it is fired. Eliminate the reasons why it may not work. Also, try using Live HTTP headers or the Firebug console to see if an AJAX request is being sent.

If the click does not start, check the selection. I often do this (pretty nasty)

 var testSelector = 'p:first ul li:last'; $(testSelector).css( { border: '1px solid red' } ); 

This will not always be visible, but if you see style = "border: 1px solid red" `in the generated markup, you know that your selector is on the ball.

Perhaps you have another click that overwrites it? Try using

 $('#delete').bind('click', function() { // do it }); 

Answer 4

I had the same problem with a quick example that I was working on. The solution was to put a click inside $ (document) .ready. I tried to use my element before it was really ready to use.

This is basic JavaScript to wait for the DOM to be ready before you try to use the element, but ... for some reason I forgot to do this, so maybe this happened to you.

Answer 5

 $(document).on('click', '#selector', function(){ // do something }); 

jQuery 1.7+ deprecated .live () and now uses .on () instead :)

Answer 6

I don't know if this is applicable in your context, but if you have parts of the page that are loaded by AJAX, you will need to bind click handlers after loading this content, which means $ (document). It won't work anymore. I ran into this problem several times when some events will fire normally until parts of the page are reloaded and suddenly all events stop shooting.

Answer 7

Just use .click with $(document).ready(function(){ ... }); because you are trying to apply a click event to a nonexistent element.

Answer 8

1) before the last }); you must add return false ;

2) Are you sure #delete exists? Also, are you sure UNIQUE?

Answer 9

This is a long shot, but good to know. http://code.google.com/p/fbug/issues/detail?id=1948

It may not be a problem if you are not using Firefox 3.5.

Answer 10

There are a few things you can do:

• as suggested by Elmo Gallen and Shoise E., enter the code $(document).ready(function(){...});
• do event processing $('#delete').click(function(){...}); AFTER the <button> ,
• use $('#submit').live('click',function(){...}); as Pariksit Tiwari suggested.

Each of them should work fine.

EDIT: oops, did not see it being asked '09: D

Answer 11

I think you should use the .on() function to dynamically run the code in jQuery as follows:

 $(document).on("click","#delete",function(){ });