爲什麼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"); 
});