[jquery] .click function not working for me

Question

Hello,

I have lots of jquery functions in my script but a particular one is not working, 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 is working

<!-- 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 doesnt show any errors, i checked html source the values are loading correct, i checked my php file 5times it is correct can't figure out the problem. Please Help.

Answer 1

With the first one, I'd put a quick and nasty alert() within the click anonymous function, to ensure that it is being fired. Eliminate reasons why it may not be working. Also, try using Live HTTP headers or Firebug's console to see if the AJAX request is being sent.

If the click is not being fired, see if you have the selector correct. I often do this (quite nasty)

var testSelector = 'p:first ul li:last';

$(testSelector).css( { border: '1px solid red' } );

It won't always be visible, but if you see style="border: 1px solid red"` in the generated markup, you know your selector is on the ball.

Perhaps you have another click that is overwriting it? Try using

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

Answer 2

1) just before the last }); you should add return false;

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

Answer 3

In Firebug, script tab, options menu, "Break on all errors" should be turned on. Sometimes, that will reveal the problem.

Answer 4

This is a long shot, but it's good to be aware of. http://code.google.com/p/fbug/issues/detail?id=1948

May not be an issue if you're not on Firefox 3.5.

Answer 5

Are you sure your page validate at w3c, have you got duplicate IDs or similar DOM issues? If it does why not upload the page, one of us will be able to diagnose the issues with the full source.

Answer 6

Instead of id=delete i changed it to class=delete in html and in js ('.delete') and it is working fine now but when again tried with id it doesnt work.

Thank You all for Help, i dont have any problem whether it is id or class just the function works now.

Answer 7

I don't know if this applies in your context, but if you have parts of the page that are getting loaded by AJAX then you'll need to bind the click handlers after that content is loaded, meaning a $(document).ready isn't going to work. I've run into this problem a number of times, where certain events will fire fine until parts of the page are reloaded, then all the sudden the events seem to stop firing.