JQuery Click () error - from stack space
Okay, I'm here. I have a control that consists of a table. I allow the user to click the hyperlink on the bottom row to go directly to the corresponding view.
On the other hand, the user can click anywhere within the table and make a selection. This selection activates a toolbar that allows the user to perform some tasks on the selected item. If the user clicks on the selected item again, I want to programmatically click the hyperlink. But when I run jQuery to programmatically click on a hyperlink, I keep getting an "Out of stack space" error. I totally understand that the click event is being called recursively, but I don't know how to prevent it! Here's my code ...
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.mouseOver, .mouseOut, .selected
{
width: 120px;
height: 120px;
text-align: center;
vertical-align: top;
display: inline-block;
margin: 5px;
cursor: pointer;
}
.mouseOver
{
border: solid thin #99defd;
background: #e9f8fe;
}
.mouseOut
{
border: solid thin White;
}
.selected
{
border: solid thin #e0a403;
background: #f8f4de;
}
</style>
<script>
(function($) {
$(document).ready(function() {
var $items = $('.mouseOut');
$items.mouseenter(function() {
if ($(this).attr('class') != 'selected')
$(this).attr('class', 'mouseOver');
});
$items.mouseleave(function() {
if ($(this).attr('class') != 'selected')
$(this).attr('class', 'mouseOut');
});
$items.click(function() {
if ($(this).attr('class') == 'selected') {
$(this).find('a').click();
}
else {
$('.selected').attr('class', 'mouseOut');
$(this).attr('class', 'selected');
}
});
});
})(jQuery);
</script>
</head>
<body runat="server">
<form id="form1" runat="server">
<table cellpadding="5" class="mouseOut">
<tr>
<td>
user module thumbnail...
</td>
</tr>
<tr>
<td>
<a id="A1" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl0$lnkBtn','')">Users</a>
</td>
</tr>
</table>
<table cellpadding="5" class="mouseOut">
<tr>
<td>
stats module thumbnail...
</td>
</tr>
<tr>
<td>
<a id="A2" href="javascript:__doPostBack('ControlPanelHost1$cphCtrl0$lvCollectionView$ctrl1$lnkBtn','')">Stats</a>
</td>
</tr>
</table>
</form>
</body>
This exhausted version will fully demonstrate the problem. Thanks to everyone who can help!
source to share
The problem is that firing an event click
on a child of an element also triggers it on that element because the event is bubbling up the DOM tree. Since your code fires a child event click
when handling the same event on its parent, infinite recursion ensues.
To work around this problem, you can use stopPropagation () to prevent events click
triggered by your hyperlinks from occurring :
$(this).find("a").click(function(e) {
e.stopPropagation();
});
EDIT: However, the code above won't work as expected, since your logic is also in the ancestor's event handler. We can switch our approach to the problem and use event.target with is () to call click
a child on the hyperlink, only if the event we are currently handling was triggered by either an ancestor element or a child that is not the hyperlink itself:
$items.click(function(event) {
if ($(this).attr('class') == 'selected' && !$(event.target).is("a")) {
$(this).find('a').click();
} else {
$('.selected').attr('class', 'mouseOut');
$(this).attr('class', 'selected');
}
});
source to share