jQuery click event requires double click to work

问题:

I actually got some problems with my script: indeed it needs 2 clicks to work in a click event. The script is this:

  $('td#td_new').live('click', function() {
    $.ajax({
    type: 'GET',
    url: 'add_hobby.php',
    data: { hobby: $('#ricerca_interests').val() }, 
     success: function(msg) {                         
        nuovo_hobby="<tr id='hobby' class='checked' selezionato='si'  hobby_id='"+msg+"' ><td id='hobby' width='179px'><div id='nome_hobby'>"+$('#ricerca_interests').val()+'</div></td></tr>';
        $(nuovo_hobby).appendTo("#interessilista");

         $('tr#new_hobby').hide().remove();


        },
    error: function() {alert("Error. Try later.");}
}); 

   });

回答1:

As of jQuery 1.7, the .live() method is deprecated. you should Use .on() to attach event handlers.

it doesn't seems that your code generate something that can cause a second click need... but try changing-

$('td#td_new').live('click', function() {

to

$(document).on('click','#td_new', function() {

then open firebug or add a console.log('something') in the success: part - and make sure that the ajax request finishes as wanted and not continuing to run.

other then that we need some more code...

have fun.

EDIT:

I tried to understand what you are trying to do according to the code you upload, but there is noway to test it, so here are some insights for you:

1. Include your source scripts (jquery + UI etc) in the head section.
2. Remove jquery.min... source - you don't need it because you include the full script any way.
3. I recommend upgrading to jquery 1.9... you are using 1.7.2
4. When using same identifier over different elements you should use class not id to declare them.
5. I recommend you to attach the click event to the div add_hobby as a class and not to the td.

Here is a small demo of the usage of on() and appending code to your page:

jsfiddle Demo

Now feel free to direct me to your exact problem.