Search jQuery

jQuery Forum

Using jQuery

maz.jquer..

addEventListener works when bind don't. Why?

in Using jQuery • 11 years ago

Hi, i'm loading a simple svg file with the embed html tag:

<embed height='280' id='map' name='map' src='/panel/map/svg' width='500' />

When i'm scripting in pure javascript:

$(document).ready(function() {
function init() {
alert("bip");
}
document.getElementById("map").addEventListener("load", init);
});

It perfectly works. But when i'm trying:

$(document).ready(function() {
function init() {
alert("bip");
}
$("#map").bind("load", init);
});

It doesn't work. The load event is well triggered because if i'm trying:

$(document).ready(function() {
$("#map").bind("load", alert("bip"));
});

It's also working properly... so, in the second way, why the init function isn't called?

EDIT: and this works:

$(document).ready(function() {
function init() {
alert("bip");
}
$("#map").bind("load", init()); // Note the brackets
});

What the hell is happening?

Replies(9)

jakecigar

Re: addEventListener works when bind don't. Why?

11 years ago

in your last 2 examples you aren’t passing a function to bind.

The jQuery syntax would be without parentheses. With parentheses you are passing null (the return value of init) after calling init.

As for why jQuery isn’t working at all, I can only guess it has something to do with the browser cache.

Please try this

<embed height='280' id='map' name='map' width='500' />

$(document).ready(function() {
$("#map").bind("load", alert("bip”)).attr(’src’,'/panel/map/svg’)
});

Kevin B

Re: Re: addEventListener works when bind don't. Why?

11 years ago

the code here is "wrong"

$("#map").bind("load", alert("bip”)).attr(’src’,'/panel/map/svg’)

it should be

$("#map").bind("load", function(){
alert("bip”);
}).attr(’src’,'/panel/map/svg’)

otherwise you are binding the load to the return value of alert("bip"), the alert happens before the load event is even bound.

-- Kevin

maz.jquer..

Re: addEventListener works when bind don't. Why?

11 years ago

The alert is called, but the svg isn't loaded. Is that what you had expected?

jakecigar

Re: Re: addEventListener works when bind don't. Why?

11 years ago

that was just the opposite of what I expected.

Have you tried loading the SVG via ajax?

maz.jquer..

Re: addEventListener works when bind don't. Why?

11 years ago

I tried again your previous post, and figured out a creepy thing:

alert is called, svg isn't loaded, ok. But then if i'm resizing the window, the svg is loaded...

I haven't tried ajax yet, and don't see why i should use ajax just to load a *à)é&"'à SVG file ,)

If i have to, i will, but if there is another solution...

It's making me crazy.

Edit:

$(document).ready(function() {
$("#map").bind("load", alert("bip")).attr({"src": 'map/svg', "height": "280", "width": "500"});
});

alert is called, svg is loaded but if i replace alert("bip") by the init handler, it still doesn't work...

Here is my latest test page.

jakecigar

Re: Re: addEventListener works when bind don't. Why?

11 years ago

first question for today is why does it only happen to you? I poked around the Internet and found some people don’t use embed, they use img.

<!DOCTYPE html>
<html>
<head>
<title> ProjetF </title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function init() {
alert ("bip");
}
function boop() {
alert ("boop");
}
$(function() {
$("#map").bind("load", init)
$("#map")[0].addEventListener("load", boop);
});
</script>
</head>
<body>
<img src='http://www.emazine.fr/projets/svgloadtest/test.svg' id='map' name='map' height="280" width="500"/>
</body>
</html>

this version alerts bip and boop!

Kevin B

Re: Re: addEventListener works when bind don't. Why?

11 years ago

the alert here wont work, see my comment above

-- Kevin

maz.jquer..

Re: addEventListener works when bind don't. Why?

11 years ago

It's a good idea and i'm thanking you to did some research, but it doesn't allow scripting from the html page on the svg elements, this returns error:

<!DOCTYPE html>
<html>
<head>
<title> ProjetF </title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://emazine.fr/projets/tooltiponmap/jquery.svg.js"></script>
<script type="text/javascript">
function init() {
alert ("bip");
}
function boop() {
mySVG = new $.svg._wrapperClass(document.getElementById("map").getSVGDocument());
var fill = $("rect:first", mySVG.root()).attr("fill");
alert ("The rectangle is " + fill);
}
$(function() {
$("#map").bind("load", init)
$("#map")[0].addEventListener("load", boop);
});
</script>
</head>
<body>
<img src='http://www.emazine.fr/projets/svgloadtest/test.svg' id='map' name='map' height="280" width="500"/>
</body>
</html>

I think there is no way to use the load event binding directly from jquery script (onload="myfunction()" in html is working, but i need to load a svg into multiple pages which need differents methods on initialization). I'm gonna use the addEventListener and try again when the next jquery version will be released. Thank you for your time.

jakecigar

Re: Re: addEventListener works when bind don't. Why?

11 years ago

With a tiny plugin You can use jQuery syntax.

<!DOCTYPE html>
<html>
<head>
<title> ProjetF </title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://emazine.fr/projets/tooltiponmap/jquery.svg.js"></script>
<script type="text/javascript">
$.fn.embedLoad=function(loadFunction){
return this.each(function(){
this.addEventListener("load", loadFunction)
})
}
function init() {
mySVG = new $.svg._wrapperClass(document.getElementById("map").getSVGDocument());
var fill = $("rect:first", mySVG.root()).attr("fill");
alert ("The rectangle is " + fill);
}
$(function() {
$("#map").embedLoad(init);
});
</script>
</head>
<body>
<embed src='test.svg' id='map' name='map' height="280" width="500"/>
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

addEventListener works when bind don't. Why?

Replies(9)

Re: addEventListener works when bind don't. Why?

Re: Re: addEventListener works when bind don't. Why?

Re: addEventListener works when bind don't. Why?

Re: Re: addEventListener works when bind don't. Why?

Re: addEventListener works when bind don't. Why?

Re: Re: addEventListener works when bind don't. Why?

Re: Re: addEventListener works when bind don't. Why?

Re: addEventListener works when bind don't. Why?

Re: Re: addEventListener works when bind don't. Why?

Statistics

Tags

Actions