Javascript 不再需要第二次。在脚本中单击_Javascript_Jquery

Javascript 不再需要第二次。在脚本中单击

javascript jquery

Javascript 不再需要第二次。在脚本中单击,javascript,jquery,Javascript,Jquery,我正在使用一个类似的设置来回答一个类似的问题，在这个问题中，我有一行内联块，单击任何块都会在该行下方创建一个内容框不同之处在于，单击一个块时，我通过AJAX加载了数据，使用链接问题上提供的小提琴，我的函数可以工作，但我必须按两次块才能运行这两个函数第一次单击：通过AJAX加载数据第二次单击：在块行下方创建内容框如果你看一下我下面的代码，你会看到这样的评论：“点击下面的这个是我试图删除的事件” 你可以看到有一个重复的“游戏列表点击事件”，基本上我试图链接到第一次点击事件，所以我只需要点击

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

不同之处在于，单击一个块时，我通过AJAX加载了数据，使用链接问题上提供的小提琴，我的函数可以工作，但我必须按两次块才能运行这两个函数

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

第二次单击：在块行下方创建内容框

如果你看一下我下面的代码，你会看到这样的评论：“点击下面的这个是我试图删除的事件”

你可以看到有一个重复的“游戏列表点击事件”，基本上我试图链接到第一次点击事件，所以我只需要点击一次

我希望这是有意义的，如果需要的话，我很乐意扩展我的问题

// -------------- 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);
});
}

/--------------主单击功能--------------
$（'.gameListing'）。单击（函数（）{
$（'.gameListing'）.removeClass（'active'）；
$（this.addClass（'active'）；
var id=$（this.attr（'data-id'）；
变量url=”http://localhost:8888/projects/superfreerespo/“+id+”？json=get_category_posts&slug=games”；
调用ajax（url）；
});
//------获取上一个/下一个项目--------------
$（'.prev'）。单击（函数（）{
var$current=$（'.gameListing.active'）；
$current.removeClass（'active'）
var postNumber=parseInt（$current.attr（'data-count'））；
var nextPost=（postNumber-1）；
$（“[数据计数=”+nextPost+“]”）。触发器（“单击”）；
});
$（'.next'）。单击（函数（）{
var$current=$（'.gameListing.active'）；
$current.removeClass（'active'）
var postNumber=parseInt（$current.attr（'data-count'））；
var nextPost=（postNumber+1）；
$（“[数据计数=”+nextPost+“]”）。触发器（“单击”）；
});
//------主AJAX函数调用--------------
函数调用\u ajax（url）{
$.ajax（{
url:url，
方法：“获取”，
数据：{json:1}，
数据类型：“JSON”
})
.完成（功能（数据）{
//加载游戏信息
$（“#游戏名”）.html（data.post.title）；
$（“#游戏卷轴”）.html（data.post.custom_fields.revels）；
$（“#游戏付款线”）.html（data.post.custom_fields.paylines）；
$（“#game minBet”）.html（data.post.custom_fields.min_bet）；
$（“#game maxBet”）.html（data.post.custom_fields.max_bet）；
$（“#游戏大奖”）.html（data.post.custom_fields.jackpot）；
$（“#游戏信息”）.html（data.post.custom_fields.game_info）；
//加载游戏提供商
var provSource=新字符串（data.post.custom\u fields.game\u name）；
provSource=provSource.replace（//g，“-”）；
$（“#游戏证明”）。加载（“http://localhost:8888/projects/superfreerespo/“+provSource+”/.gameBox Ops”）；
//加载游戏拇指
var gameThumbSrc=新字符串（data.post.custom\u fields.game\u name）；
gameThumbSrc=gameThumbSrc.replace（//g'，）；
$（'#gameBoxGallery'）.html（''）；
对于（i=0；i那么，您可以将附加功能的框从新的单击处理程序和调用ajax

函数中移出。因此，我这样做了，并使该函数在完成ajax调用时被调用。因为您需要

这个

（单击的元素），所以您也需要传递它

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

没有重新构造你的代码，我就这么做了

试试看：

// -------------- 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);
}

/--------------主单击功能--------------
$（'.gameListing'）。单击（函数（）{
$（'.gameListing'）.removeClass（'active'）；
$（this.addClass（'active'）；
var id=$（this.attr（'data-id'）；
变量url=”http://localhost:8888/projects/superfreerespo/“+id+”？json=get_category_posts&slug=games”；
//传递url和单击的元素
调用_ajax（url，this）；
});
//------获取上一个/下一个项目--------------
$（'.prev'）。单击（函数（）{
var$current=$（'.gameListing.active'）；
$current.removeClass（'active'）
var postNumber=parseInt（$current.attr（'data-count'））；
var nextPost=（postNumber-1）；
$（“[数据计数=”+nextPost+“]”）。触发器（“单击”）；
});
$（'.next'）。单击（函数（）{
var$current=$（'.gameListing.active'）；
$current.removeClass（'active'）
var postNumber=parseInt（$current.attr（'data-count'））；
var nextPost=（postNumber+1）；
$（“[数据计数=”+nextPost+“]”）。触发器（“单击”）；
});
//------主AJAX函数调用--------------
函数调用\u ajax（url，elem）{
$.ajax({
url:url，
方法：“获取”，
数据：{
json:1
},
数据类型：“JSON”
})
.完成（功能（数据）{
//附加该框
附件盒（elem）；
//加载游戏信息
$（“#游戏名”）.html（data.post.title）；
$（“#游戏卷轴”）.html（data.post.custom_fields.revels）；
$（“#游戏付款线”）.html（data.post.custom_fields.paylines）；
$（“#game minBet”）.html（data.post.custom_fields.min_bet）；
$（“#game maxBet”）.html（data.post.custom_fields.max_bet）；
$（“#游戏大奖”）.html（data.post.custom_fields.jackpot）；
$（“#游戏信息”）.html（data.post.custom_fields.game_info）；
//加载游戏提供商
var provSource=新字符串（data.post.custom\u fields.game\u name）；
provSource=provSource.replace（//g，“-”）；
$（“#游戏证明”）。加载（“http://localhost:8888/projects/superfreerespo/“+provSource+”/.gameBox Ops”）；
//加载游戏拇指
var gameThumbSrc=新字符串（data.post.custom\u fields.game\u name）；
gameThumbSrc=gameThumbSrc.replace（//g'，）；
$（'#gameBoxGallery'）.html（''）；
对于（i=0；i first..我不明白为什么您在调用中使用jquery.event.on\u ajax函数，如果您使用。on listener请原谅任何新手