在脚本

Question

我正在使用一个类似的问题来设置类似的问题，其中我有一行内联块，点击任何一个块会在该行下方创建一个内容框。

Add a div below inline-block wrapped row

不同之处在于点击一个块我有通过AJAX加载的数据，使用链接问题上提供的小提琴我有功能工作，除了事实我必须按两次块才能运行这两个功能。

第一次点击：通过AJAX加载数据

第二次点击：在一排块下面创建内容框

如果您查看下面我的代码，您可以看到评论“此处点击下面是我正在尝试删除的事件”

你可以看到“gameListing Click Event”的副本，基本上我试图将它链接到第一个Click事件，所以我只需要点击一次。

我希望这是有道理的，如果需要，我很乐意扩展我的问题。

// -------------- MAIN CLICK FUNCTION --------------
$('.gameListing').click(function(){

    $('.gameListing').removeClass('active');
    $(this).addClass('active');

    var id = $(this).attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});


// -------------- GET PREV / NEXT ITEMS --------------
$('.prev').click(function(){
    var $current = $('.gameListing.active');
    $current.removeClass('active')
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber - 1);
    $("[data-count='"+nextPost+"']").trigger("click");
});

$('.next').click(function(){
    var $current = $('.gameListing.active');
    $current.removeClass('active')
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber + 1);
    $("[data-count='"+nextPost+"']").trigger("click");
});


// -------------- MAIN AJAX FUNCTION CALL --------------
function call_ajax(url) {

    $.ajax( {
            url: url,
            method: "GET",
            data: {json:  1},
            dataType: "JSON"
     })

        .done(function( data ) {

        // LOAD GAME INFORMATION
        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);

        // LOAD GAME PROVIDERS
        var provSource = new String(data.post.custom_fields.game_name);
                provSource = provSource.replace(/ /g,"-");
                $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + provSource + "/ .gameBox-Ops");

        // LOAD GAME THUMBNALS
        var gameThumbSrc = new String(data.post.custom_fields.game_name);
        gameThumbSrc = gameThumbSrc.replace(/ /g,'');

        $('#gameBoxGallery').html('');
            for(i = 0;  i<= 2; i++){
                            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">'
                            $('#gameBoxGallery').append(image);
        };

        // ZOOM FIRST THUMBNAIL
        $('#gameBox-Screenshot').html('');
            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">'
        $('#gameBox-Screenshot').append(image);

        })  



// -------------- CREATE CONTENT BOX  --------------

        function placeAfter($block) {
            $block.after($('#gameBox'));
        }

        var $chosen = null;


        // -------------- THIS ON CLICK BELOW IS THE EVENT I AM TRYING TO REMOVE --------------
        $('.gameListing').on('click', function() {


            $chosen = $(this);
            $('#gameBox').css('display','inline-block');
            $('#gameBox').slideDown( 3000 );


            var top = $(this).offset().top;
            var $blocks = $(this).nextAll('.gameListing');
            if ($blocks.length == 0) {
                placeAfter($(this));
                return false;
            }
            $blocks.each(function(i, j) {
                if($(this).offset().top != top) {
                    placeAfter($(this).prev('.gameListing'));
                    return false;
                } else if ((i + 1) == $blocks.length) {
                    placeAfter($(this));
                    return false;
                }
         });

        $('html, body').animate({ scrollTop: $(this).offset().top - 40}, 600);
});
}

以下是原始小提琴的链接：http://jsfiddle.net/SYJaj/7/

Answer 1

好吧，您可以将新的单击处理程序中的框附加功能移出call_ajax功能。所以我这样做了，以便在你的AJAX调用完成时调用该函数。由于您需要this（点击的元素），您也需要传递它。

您在点击处理程序中设置了一个新的点击处理程序，这就是您的问题发生的原因。

在没有重新构建代码的情况下，我做了这个......

试一试：

// -------------- MAIN CLICK FUNCTION --------------
$('.gameListing').click(function () {

    $('.gameListing').removeClass('active');
    $(this).addClass('active');

    var id = $(this).attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    // Pass the url and the clicked element
    call_ajax(url, this);
});


// -------------- GET PREV / NEXT ITEMS --------------
$('.prev').click(function () {
    var $current = $('.gameListing.active');
    $current.removeClass('active')
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber - 1);
    $("[data-count='" + nextPost + "']").trigger("click");
});

$('.next').click(function () {
    var $current = $('.gameListing.active');
    $current.removeClass('active')
    var postNumber = parseInt($current.attr('data-count'));
    var nextPost = (postNumber + 1);
    $("[data-count='" + nextPost + "']").trigger("click");
});


// -------------- MAIN AJAX FUNCTION CALL --------------
function call_ajax(url, elem) {

    $.ajax({
        url: url,
        method: "GET",
        data: {
            json: 1
        },
        dataType: "JSON"
    })
    .done(function (data) {

        // Append the box
        appendBox(elem);

        // LOAD GAME INFORMATION
        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);

        // LOAD GAME PROVIDERS
        var provSource = new String(data.post.custom_fields.game_name);
        provSource = provSource.replace(/ /g, "-");
        $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + provSource + "/ .gameBox-Ops");

        // LOAD GAME THUMBNALS
        var gameThumbSrc = new String(data.post.custom_fields.game_name);
        gameThumbSrc = gameThumbSrc.replace(/ /g, '');

        $('#gameBoxGallery').html('');
        for (i = 0; i <= 2; i++) {
            image = '<img src="<?php bloginfo('
            template_directory '); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">'
            $('#gameBoxGallery').append(image);
        };

        // ZOOM FIRST THUMBNAIL
        $('#gameBox-Screenshot').html('');
        image = '<img src="<?php bloginfo('
        template_directory '); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">'
        $('#gameBox-Screenshot').append(image);

    });
}

// Move the box-appending code outside of the AJAX call,
// and outside of a new click event
function appendBox(elem) {
    var $chosen = $(elem),
        $gameBox = $('#gameBox'),
        top = $chosen.offset().top,
        $blocks = $chosen.nextAll('.gameListing');
    if($chosen.attr('data-id') === $gameBox.attr('data-id')) {
        $gameBox.stop().slideUp(3000, function () {
            $(this).css('display', 'none');
        });
        $gameBox.attr('data-id', '');
    } else {
        $gameBox.slideDown(3000, function () {
            $(this).css('display', 'inline-block');
        });
        $gameBox.attr('data-id', $chosen.attr('data-id'));
    }
    function placeAfter($block) {
        $block.after($gameBox);
    }
    if ($blocks.length == 0) {
        placeAfter($chosen);
        return false;
    }

    $blocks.each(function (i, j) {
        if ($(this).offset().top != top) {
            placeAfter($(this).prev('.gameListing'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });

    $('html, body').animate({
        scrollTop: $chosen.offset().top - 40
    }, 600);
}