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并使用包含所有function个事件的简单.click()，然后在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
});

我希望这个答案可以帮助别人：）

.click（）不再工作了jquery

2 个答案: