Get Child Element being clicked
OK, so here's my issue (it must be simple, but I still cannot figure this
one out)...
I've got a sample HTML code like the one below :
<!-- 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 -->
All I want to do is when a specific element, with the comp-id attribute
set, is clicked - we highlight (by adding the msp-selected class) just
that specific element.
However, this is not working...
This is what I've tried :
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');
});
});
However, here's the problem :
When clicking on the button (comp-id="jqm-button-1547")
It highlights : a) first the button, b) then jqm-content-3537, c) then
jqm-page-6271
In a few words, in the end, the 'page' is highlighted, instead of the button.
Any ideas?
And here's a fiddle : http://jsfiddle.net/CTZD3/
No comments:
Post a Comment