Почему функция jQuery .click обновляет все в документе по второму клику?

Question

Я использую jQuery на своем веб-сайте. Ниже приведен код, с которым у меня проблема:

 $("#activitiesbtn").click(function(){
    $('#dashboard-mainsubhead').load('activity.html', function() {
        // doing some stuff here

        // Following code is making problem
        $('.subareas').bind('click', function(){
            var keytext = $(this).find('.areakey').text();

            $.ajax({
                type: 'POST',
                url: 'http://localhost:8888/getactivity',
                data: {activitykey: keytext},
                success: function(result) { 
                    activityobj = jQuery.parseJSON(result);
                }
            });

            var activityurl = activityobj.mapurl;
            var activmapurl = "<img src=\""+activityurl+"\"></img>";
            $('#activity-mapimg').html(activmapurl);
            $('#activity-activitykey').html(activityobj.key);
            $('#activity-activitymode').html(activityobj.activityMode);
            $('#activity-time').html(activityobj.totalTimeTaken);
            $('#activity-distance').html(activityobj.totalDistanceCovered);
            $('#activity-calories').html(activityobj.calories);
            $('#activity-wallutas').html(activityobj.wallutas);

            alert("subarea div clicked");
        });
    });
});

Проблема в том, что в первый раз, когда я щелкаю по любому из div, у которого есть класс подрайонов, ничего не происходит. Но после этого каждый раз, когда я щелкаю по любому div класса в подрайонах, появляется предупреждение «subarea div clicked», но текст других элементов div меняется при каждом втором щелчке. Почему это происходит? Любая идея? Заранее спасибо.

Answer 1

Во-первых, вам нужно каждый раз отсоединять click, в противном случае код будет выполняться несколько раз.

Во-вторых, вам нужно использовать данные, возвращаемые вызовом .ajax, только в случае успеха:

$('.subareas').unbind("click");
$('.subareas').bind('click', function(){
    var keytext = $(this).find('.areakey').text();
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8888/getactivity',
        data: {activitykey: keytext},
        success: function(result) { 
            activityobj = jQuery.parseJSON(result);
            var activityurl = activityobj.mapurl;
            var activmapurl = "<img src=\""+activityurl+"\"></img>";
            $('#activity-mapimg').html(activmapurl);
            $('#activity-activitykey').html(activityobj.key);
            $('#activity-activitymode').html(activityobj.activityMode);
            $('#activity-time').html(activityobj.totalTimeTaken);
            $('#activity-distance').html(activityobj.totalDistanceCovered);
            $('#activity-calories').html(activityobj.calories);
            $('#activity-wallutas').html(activityobj.wallutas);
        }
    });
});

Переменная activityobj не будет иметь никакого значения, кроме функции $.ajax(), при первом запуске - во второй раз, когда она имеет значение предыдущего вызова.

Answer 2

Ваш второй слушатель, который $('.subareas') click внутри слушателя первого клика

для его активации необходимо нажать $("#activitiesbtn")

Вам нужно переместить $('.subareas') click listener из первого слушателя.

 $("#activitiesbtn").click(function(){
    $('#dashboard-mainsubhead').load('activity.html', function() {
        // doing some stuff here

    });
});


// Following code is making problem
$('.subareas').bind('click', function(){
    var keytext = $(this).find('.areakey').text();
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8888/getactivity',
        data: {activitykey: keytext},
        success: function(result) { 
            activityobj = jQuery.parseJSON(result);
        }
    });

    var activityurl = activityobj.mapurl;
    var activmapurl = "<img src=\""+activityurl+"\"></img>";
    $('#activity-mapimg').html(activmapurl);
    $('#activity-activitykey').html(activityobj.key);
    $('#activity-activitymode').html(activityobj.activityMode);
    $('#activity-time').html(activityobj.totalTimeTaken);
    $('#activity-distance').html(activityobj.totalDistanceCovered);
    $('#activity-calories').html(activityobj.calories);
    $('#activity-wallutas').html(activityobj.wallutas);

    alert("subarea div clicked");
});