I'm using the jquery.treeview plugin to build an outline. Each
element within the outline has a link to the side of it that runs a
javascript function. I'd like to have users click on this without
triggering the toggle of the element.
Below is a very simple html file that shows the problem- each element
has a [+] to the side of it- when you click on that link, in addition
to the alert, the group will expand or contract. Any ideas how to
suppress that when clicking on the [+], but allow it when clicking on
the text itself?
<html>
<head>
<script src='jquery/jquery.js' type='text/javascript'></script>
<script src='jquery/jquery-treeview/jquery.treeview.js' type='text/
javascript'></script>
<script src='jquery/jquery.cookie.js' type='text/javascript'></script>
<script language="JavaScript">
$(document).ready(function(){
$("#outline").treeview({
animated: "fast",
collapsed: false,
unique: false,
persist: "cookie",
toggle: function() {
window.console && console.log("%o was toggled", this);
}
});
});
</script>
<link rel="stylesheet" href="jquery/jquery-treeview/
jquery.treeview.css" type="text/css" media="screen" />
</head>
<body>
<ul id="outline" class="treeview-red">
<li><span>top element <a href="javascript:void(0);" onClick="alert
('hi');">[+]</a></span>
<ul>
<li><span>level 1 element 1<a href="javascript:void(0);"
onClick="alert('hi');">[+]</a></span>
<ul>
<li><span>level 2 element 1 <a href="javascript:void(0);"
onClick="alert('hi');">[+]</a></span></li>
<li><span>level 2 element 2 <a href="javascript:void(0);"
onClick="alert('hi');');">[+]</a></span>
</ul>
</li>
</ul>
</body>
</html>
