Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: open

Message Too Old, No Replies

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

     

internetheaven

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

WebmasterWorld Senior Member 10+ Year Member



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

8:44 pm on Mar 4, 2013 (gmt 0)

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



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

8:55 pm on Mar 4, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

9:15 pm on Mar 4, 2013 (gmt 0)

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



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

9:27 pm on Mar 4, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:27 pm on Mar 4, 2013 (gmt 0)

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



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

11:59 pm on Mar 4, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Damn it ...

internetheaven

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

WebmasterWorld Senior Member 10+ Year Member



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

1:50 am on Mar 5, 2013 (gmt 0)

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



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

2:10 am on Mar 5, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:11 pm on Mar 5, 2013 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month