stopPropagation working in Firefox but not IE or Chrome
Question
I have an ASP.NET user control (ascx) which has a div which has its onclick open a pop-up. My task is to put a hyperlink into this div that goes somewhere else and not open the pop-up. My initial problem is that the hyperlink went somewhere else just fine, but it still opened the pop-up. Research brought me to stopPropagation() . However, while it appears to be working in Firefox, it doesn't in IE or Chrome. More to the point, it seems the events themselves aren't wiring up. I have tried the following on the ASCX:
<script type="text/javascript">
/*global $*/
$("#voucher1").click(function(e) {
"use strict";
e.stopPropagation();
});
$("#voucher2").click(function (e) {
"use strict";
e.stopPropagation();
});
</script>
and
<script type="text/javascript">
/*global $*/
$(function () {
"use strict";
$("#voucher1").click(function (e) {
e.stopPropagation();
});
$("#voucher2").click(function (e) {
e.stopPropagation();
});
});
</script>
voucher1 and voucher2 are simple <a id="voucher1" href="blahblah">blah</a> tags on the control. What am I (or the browser, or both) doing wrong?
3 answers
solution1
0 2013-07-08 20:12:45
Need to prevent the default action for anchor and make sure the page is completly loaded:
<script type="text/javascript">
$(document).ready(function(){
$("#voucher1").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
$("#voucher2").click(function (e) {
e.preventDefault();
e.stopPropagation();
});
});
</script>
solution2
0 2013-07-08 20:34:55
How many elements are in your containing div? Here is another way to do it that instead of keeping the "cancel popup" logic on the links, puts it on the div itself.
$("your div").delegate("*:not(a)", "click", function () {
alert("your popup");
});
This method has the advantage that if you are dynamically adding <a> tags to "your div", that since the event handler is attached on "your div", all new children are still wired to the event (or as in your case, not wired to the event).
Full example:
It's best practice to add all jquery event handlers only after the DOM is ready. Luckily, jquery makes this really easy for you as follows:
<html>
<head>
<script src="your jquery"></script>
<script>
$(document).ready(function() {
$("#yourdiv").delegate("*:not(a)", "click", function () {
alert("your popup");
});
});
</script>
</head>
<body>
<div id="yourdiv">
<span>here but</span>
<a href="#somewhere">not here</a>
</div>
</body>
</html>
solution3
0 ACCPTED 2013-07-08 23:19:23
Found the reason it didn't work. The framework in which my company renders this page dynamically loads an .aspx into another .aspx (yo, dawg jokes apply here) and it kept my JavaScript from registering at page init, because the child page never really initialized. I found a global JS which gave me access to the child page as it's loading it in and I popped in my stuff there and it works everywhere. Thanks for the suggestions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.