獲取被點擊子元素

好了，這裏是我的問題（它必須是簡單的，但我還是不明白這出一個）......獲取被點擊子元素

我有一個HTML代碼示例類似下面：

<!-- New Website #1 --> 
<!DOCTYPE html> 
<html style='min-height:0px;'> 
    <head> 
     <title>Page Title</title> 

     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 

     <link rel="stylesheet" href="jquery.mobile.min.css" /> 
     <link rel="stylesheet" href="custom.css" /> 
     <link rel="stylesheet" href="dev.css" /> 


    </head> 

    <body id="jqm-website-6926" class="" > 


     <!-- New Page #1 --> 
     <div data-role="page" comp-id="jqm-page-6271" id="jqm-page-6271" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" > 

      <!-- New Header #1 --> 
      <div data-role="header" comp-id="jqm-header-364" id="jqm-header-364" class="" data-position="" data-fullscreen="false" data-theme="" > 
       <h1></h1> 
      </div> 
      <!--/New Header #1 --> 

      <!-- New Content #1 --> 
      <div data-role="content" comp-id="jqm-content-3537" id="jqm-content-3537" class="" data-theme="" > 

       <!-- New Button #1 --> 
       <div comp-id="jqm-button-1547" > 
        <a data-role="button" id="jqm-button-1547" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="(null)"> 

        </a> 
       </div> 
       <!--/New Button #1 --> 
      </div> 
      <!--/New Content #1 --> 
     </div> 
     <!--/New Page #1 --> 

     <!-- New Page #1 --> 
     <div data-role="page" comp-id="jqm-page-9207" id="jqm-page-9207" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" > 

     </div> 
     <!--/New Page #1 --> 


     <script src="jquery.min.js"></script> 
     <script src="jquery.mobile.min.js"></script> 
     <script src="custom.js"></script> 
     <script src="dev.js"></script> 

    </body> 
</html> 
<!--/New Website #1 -->

所有我想要做的是一個特定的元素，與comp-id屬性集，被點擊的時候 - 我們強調（通過添加msp-selected類）只是特定元素。

然而，這是不工作...

這是我已經試過：

function removeAll() 
{ 
    $("[comp-id]").each(function() { 
     if ($(this)!==undefined) { 
      $(this).removeClass("msp-selected"); 
     } 
    }); 
} 

$(document).ready(function() { 
    $('[comp-id]:not(.msp-selected)').on('click', function(e) { 
     removeAll(); 

     $(this).addClass('msp-selected'); 
    }); 
});

然而，這裏的問題：

當點擊在按鈕上（comp-id="jqm-button-1547"）
It亮點：a）首先按鈕，然後b）然後jqm-content-3537，c）然後jqm-page-6271
簡而言之，最後，'頁'突出顯示，而不是按鈕。

任何想法？

這裏是一個小提琴：http://jsfiddle.net/CTZD3/

來源

2013-08-20 Dr.Kameleon

沒有你之前也問這個問題？ ;）只是問，因爲我認爲你在這個問題上不夠清楚 – AdityaSaxena

@AdityaSaxena嗯，我做到了。我只是重新發布，因爲我認爲我現在知道如何正確地...說出它，以及真正的問題是什麼... ;-) –

很酷......我只是檢查發生了什麼事，對那個答覆 – AdityaSaxena

也許你可以停止事件傳播給家長元素與event.stopPropagation();

$(document).ready(function() { 
    $('[comp-id]:not(.msp-selected)').on('click', function(e) { 
     removeAll(); 
     e.stopPropagation(); 
     $(this).addClass('msp-selected'); 
    }); 
});

來源

2013-08-20 08:22:35

哇！它*簡單嗎？！你即將成爲我的英雄 - 我認爲（雖然我仍然不敢相信它）的工作！ :-)謝謝你，很多朋友！ –

好吧，不客氣;）不要忘記檢查答案作爲回答你的問題;） –

嗯......我不是......這只是強制性的延遲時間......再次感謝！ ;-) –

獲取被點擊子元素

回答

相關問題