This question is similar to my last question about "too much recursion" errors in jQuery, but involving live handlers. I have one element within another. Both of them have custom event handlers with the same name. The outer element has a traditional handler and the inner element has a live handler. When I try to trigger the event on the outer element, my browser pauses for a while, then I get an error saying "too much recursion".
I read on the live handler documentation page that I can prevent bubbling of a live handler by returning false within the handler function. However, I tried this and it doesn't seem to make a difference. Either way, the outer function seems to somehow be called many times when I am trying to call it only once.
How can I fix this? Is it possible to have handlers with the same name like this, or do I have to come up with different names? You can test the problem using this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>live event handler test</title>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("#outer").bind("test", function() {
$("#inner").trigger("test");
});
$("#inner").live("test", function() {
return false;
});
$(function() {
$("#outer").trigger("test");
});
</script>
</body></html>