Can't get "trigger" to work. What am I doing wrong?

[internetheaven]

I have this:

<script src="/js/jquery-1.9.1.min.js"></script>
<div id="myselector"><a href="/joke.php"><img src="/images/joke.gif" border="0" /></a></div>
<script>
$( document ).ready(function() {
$(#myselector).mouseenter(function() { $(this).click() });
});
</script>

but it does not click the link when hovered over. This is my first step into jquery. Where am I going wrong?!

[Fotiman]

The jQuery function (aka, the $ function) takes a string that specifies the selector to find the element. In your case, though, you've neglected to include the quotes around your string, so you'll actually have a JavaScript error.
$(#myselector)
should be
$('#myselector')

[internetheaven]

Yes, I'd already tried that in a version. It didn't seem to make any difference.

I can make an alert appear just fine with:

<div id="myselector"><a href="/joke.php"><img src="/images/joke.gif" border="0" /></a></div>
<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) {
alert("Hello. How are you?");
event.preventDefault();
});
});
</script>

I just can't make it click.

<div id="myselector"><a href="/joke.php"><img src="/images/joke.gif" border="0" /></a></div>
<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) {
$(this).click();
});
});
</script>

[Fotiman]

Sorry... I only looked quickly and saw that error.

Ok, the problem is that the item you are trying to click is a div element (not the link element, which is what I think you're trying for). Try something like this:

$("#myselector").mouseover(function( event ) { 
  $(this).find('a').click(); 
}); 

[internetheaven]

Thank you. But no, that didn't do anything.

It must surely be possible? I can make other things happen on mouse over. How come click is so difficult?

If I use this:

<div><a href="/joke.php"><img id="myselector" src="/images/joke.gif" border="0" /></a></div>

<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) {
$(this).trigger('click');
});
});
</script>

It works. But I need it to work on the <div> as this is for a sitewide thing and the bit inside the div is variable.

[Fotiman]

Ok, just tried it on jsfiddle. Because find returns a collection, you need to specify the index of which one to click on. So the correct example is:

$("#myselector").mouseover(function( event ) { 
 $(this).find('a')[0].click(); 
}); 

[internetheaven]

Hooray! That's worked! ... but not on Safari ... or when it was a javascript-called image in the <div> ...

Damn it ...

[internetheaven]

Thank you Fontiman for your help with my jquery problem. I now have two working pieces of code:

<div id="myselector"><a href="/joke.php"><img src="/images/joke.gif" border="0" /></a></div>
<script>
$(document).ready(function() {
$("#myselector").mouseover(function() {window.location.href = $(this).find('a').attr('href');});
});
</script>

and:

<div id="myselector"><a href="/joke.php"><img src="/images/joke.gif" border="0" /></a></div>
<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) { 
 $(this).find('a')[0].click(); 
});
});
</script>

Which fires the /joke.php link when the image is hovered over. But this is going to be a sitewide code for various old elements. Some, are called by javascript. And this:

<div id="myselector"><script type="text/javascript" src="/archive/humour.js"></script></div>
<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) { 
 $(this).find('a')[0].click(); 
});
});
</script>

does not work. The humour.js file returns a random jpg/gif that has an <a href> link. Any ideas how I would get the href link in the javascript file to fire on hover?

Thanks again

[Fotiman]

Without seeing what humour.js is doing, it's hard to say. Note, I tried a very simple example that still seemed to work:
<div id="myselector"><script>document.write('<a href="\/joke.php"><img src="\/images\/joke.gif" border="0" \/><\/a>');</script></div>

So without knowing what humour.js is doing, it's hard to guess. You should still be able to use browser developer tools to inspect the img and see if the markup looks like what you expect it to.

[internetheaven]

Sorry. Should have explained better. The only fixed feature, is the divs around the element. The elements themselves are random and varied in type.

<div id="myselector">//something//</div>
<script>
$( document ).ready(function() {
$("#myselector").mouseover(function( event ) {
$(this).find('a')[0].click();
});
});
</script>

Where //something// is either a javascript file for an image/link, or and HTML image/link.

[Fotiman]

I'm not exactly sure what your goal is. The code I gave will find the first <a> link within the #myselector div, and click it. If your code is structured differently, I think you'll need to define which pattern fits your code.