homepage Welcome to WebmasterWorld Guest from 54.196.69.189
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:4551028
 7:57 pm on Mar 4, 2013 (gmt 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?!

 

Fotiman




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

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




msg:4551045
 8:55 pm on Mar 4, 2013 (gmt 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>

Fotiman




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

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




msg:4551061
 9:27 pm on Mar 4, 2013 (gmt 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.

Fotiman




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

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




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

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

Damn it ...

internetheaven




msg:4551153
 1:13 am on Mar 5, 2013 (gmt 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

Fotiman




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

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




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

Fotiman




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved