堆疊divs都激活使用jquery .click

Question

我想使用AJAX作爲即時通訊製作的網絡應用程序遊戲。

總之，我有以下HTML：

<li id='fight'><div id='change'></div></li> 

在下面的JS，你會看到，當用戶點擊「打」腳本運行，以取代「主」

內容

我也希望用戶能夠或者點擊「更改」，這應該在「戰鬥」內部，並讓它改變主要。

當前，當用戶單擊「更改」時，它將運行腳本，更改main，然後運行「fight」並再次進行更改。

我需要只在用戶點擊時才運行「更改」。

JS：

$("#fight").click(function() { 
    var page = 'fight'; 
    getmain(page) 
}); 

$("#change").click(function() { 
    var page = 'change'; 
    getmain(page); 
    evt.stopPropagation(); 
}); 

function getmain(page){ 
    $.ajax({ 
      type: "POST", 
      async: false, 
      url: 'welcome/loadmain', 
      dataType: 'json', 
      data: { page: page }, 
      success: function(content){ 
       var html = ''; 
       html += content['content']; 
       $('#main').html(html); 
      } 
     });  
} 

$.ajax({ 
    type: "POST", 
    async: false, 
    url: 'welcome/loadmain', 
    dataType: 'json', 
    data: { page: 'get_zone' }, 
    success: function(content){ 
     var html = ''; 
     html += content['content']; 
     $('#fight').html(html); 
    } 
}); 

HTML

public function get_zone() 
    { 
     $user_id = $this->tank_auth->get_user_id(); 
     $itemroll = $this->db->query("SELECT current_zone, z.name FROM user_load ul 
            INNER JOIN zones z 
            ON z.id = ul.current_zone 
            WHERE ul.user_id = $user_id"); 
     $result = $itemroll->row_array(); 
     $zone['current_zone']= $result['current_zone']; 
     $zone['name'] = $result['name']; 
     //HTML Formatting 
     $content = ''; 
     $content .= "<div id='zonename'>Zone = ". $zone['name']. "</div>"; 
     $content .= "<div id='change'>Change Zone</div>"; 
     return $content; 
    } 

Answer 1

變化

$("#fight").click(function() { 
    var page = 'fight'; 
    getmain(page) 
}); 

到

$("#fight").click(function(e) { 
    if ($(this).is(e.target)) { 
     var page = 'fight'; 
     getmain(page); 
    } 
}); 

這使得事件只有在事件目標是事件綁定的元素時纔會得到處理。

Answer 2

您需要將事件傳遞給更改功能：

$("#change").click(function(evt) { 
    evt.stopPropagation(); 
    var page = 'change'; 
    getmain(page); 
});