。點擊（）不工作了jQuery的

Question

我用$.ajax();之前，我一直在用這個jQuery和它的工作好：

$(document).ready(function(){ 
    var urlSerilize = 'some link'; 
    var appList = $("#applications > li > a"); 
    var appCheck = $('input[type=checkbox][data-level="subchild"]'); 
    var installbtn = $('#submitbtn'); 
    var form = []; 
    var checked = []; 

    //var appList = $(".body-list > ul > li"); 
    //var appCheck = $('input[type=checkbox][data-level="subchild"]'); 
    appList.click(function(){ 
     console.log('here!'); 
     if($(this).children().find("input").is(":checked")){ 
      $(this).children().find("input").prop('checked', false); 
      $(this).children('form').removeClass('checked'); 
      $(this).removeClass("li-checked"); 
      var rmValue = $(this).children('form').attr('id'); 
      form = jQuery.grep(form, function(value) { 
       return value != rmValue; 
      }); 
     }else{ 
      $(this).children().find("input").prop('checked',true); 
      $(this).addClass("li-checked"); 
      $(this).children('form').addClass('checked'); 
      form.push($(this).children('form').attr('id')); 
     } 
     console.log(form); 
    }); 

    installbtn.on('click', function() { 
     event.preventDefault(); 
     jQuery.each(form, function(i, val) { 
      console.log(val); 
      var request = $.ajax({ 
        url: urlSerilize, 
        type: 'GET', 
        data: $('#'+val).serialize(), 
        success: function(response) { 
         console.log(response); 
         $('#applications').html(); 
         $('#apps_box').html(); 
        } 
       }); 

      request.done(function(msg){ 
       console.log('Ajax done: ' + 'Yeah it works!!!'); 
      }); 

      request.fail(function(jqXHR, textStatus){ 
       console.log('failed to install this application: ' + textStatus); 
      }); 
     }); 
    }); 
}); 

，但之後我用這個ajax代碼.click() jQuery的事件不工作了：

$(document).ready(function() { 
    /* loading apps */ 
    //console.log('active'); 
    var request = $.ajax({ 
     url: 'some link', 
     type: 'GET', 
     dataType: 'html', 
     data: {id: 0}, 
    }) 
    request.done(function(data) { 
     console.log("success"); 
     $('#applications').empty().append(data); 
    }) 
    request.fail(function() { 
     console.log("error"); 
    }) 
    request.always(function() { 
     console.log("complete"); 
    }); 
    //end loading apps 

    var showmore = $('.showapps'); 
    showmore.click(function(){ 
     var parent = $(this).parent('.tv_apps'); 
     var displayC = parent.children('.body-list').css('display'); 
     console.log(displayC); 
     if (displayC=='none') { 
      parent.children('.body-list').show('400'); 
      $(this).children().find('img').rotate({animateTo: 180}); 
     }else{ 
      parent.children('.body-list').hide('400'); 
      $(this).children().find('img').rotate({animateTo: 0}); 
     }; 
    }); 
}); 

在第一個地方我雖然是因爲AJAX負荷和不停止，那麼我錯了。 我試過window.load=function(); DOM函數加載腳本後Ajax完成加載，也是錯誤的。 那麼請如果有任何想法解決這個問題， 謝謝。

這是事件，我希望它是固定的：

appList.click(function(){ 
    console.log('here!'); 
    if($(this).children().find("input").is(":checked")){ 
     $(this).children().find("input").prop('checked', false); 
     $(this).children('form').removeClass('checked'); 
     $(this).removeClass("li-checked"); 
     var rmValue = $(this).children('form').attr('id'); 
     form = jQuery.grep(form, function(value) { 
      return value != rmValue; 
     }); 
    }else{ 
     $(this).children().find("input").prop('checked',true); 
     $(this).addClass("li-checked"); 
     $(this).children('form').addClass('checked'); 
     form.push($(this).children('form').attr('id')); 
    } 
    console.log(form); 
}); 

Answer 1

showmore.click(function(){ 

應該

$('.showapps').on('click', function(){  

OR

$(document).on('click','.showapps', function(){ 

對於動態添加的內容，你需要綁定事件。

欲瞭解更多信息：http://learn.jquery.com/events/event-delegation/

Answer 2

謝謝大家，我終於找到了解決方案。 這是一個DOM的問題，當我使用jQuery的ready方法時，它加載一個空的ul（沒有內容），所以然後我第一次想到的是正確的，我所做的只是刪除ready並使用一個包含所有.click()事件的簡單function，然後在request.done();中調用它。 這是解決方案：

function loadInstaller(){ 
    var urlSerilize = 'some link'; 
    var appList = $("#applications > li"); 
    var appCheck = $('input[type=checkbox][data-level="subchild"]'); 
    var installbtn = $('#submitbtn'); 
    var form = []; 
    var checked = []; 

    //...etc 

}; 

$(document).ready(function() { 
    /* loading apps */ 
    //console.log('active'); 
    var request = $.ajax({ 
     url: 'some link', 
     type: 'GET', 
     dataType: 'html', 
     data: {id: 0}, 
    }) 
    request.done(function(data) { 
     console.log("success"); 
     $('#applications').empty().append(data); 
     loadInstaller(); 
    }) 

    //...etc 
}); 

我希望這個答案可以幫助別人:)