.click function not working for me

Question

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

I struggled with the EXACT SAME PROBLEM for 6hr straight! the solution was to use jquery 'live'.

And that is it.

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

Answer 2

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 3

I just had the same problem with a quick example I was working on. The solution was to put the click inside $(document).ready. I was trying to use my element before it was actually ready to be used.

It's basic JavaScript to wait until the DOM is ready before you try to use an element, but... for whatever reason I forgot to do that, so maybe the same happened to you.