Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: open

Message Too Old, No Replies

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

     
7:57 pm on Mar 4, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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?!
8:44 pm on Mar 4, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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')
8:55 pm on Mar 4, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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>
9:15 pm on Mar 4, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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();
});
9:27 pm on Mar 4, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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.
10:27 pm on Mar 4, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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();
});
11:59 pm on Mar 4, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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

Damn it ...
1:13 am on Mar 5, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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
1:50 am on Mar 5, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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.
2:10 am on Mar 5, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 25, 2003
posts:2527
votes: 0


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.
2:11 pm on Mar 5, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members