jquery .on method don't work

Question

I work on my script to show some video, when you are "onmouseover" on my div. Because of IE I use jquery function which call mouseenter, but nothing happend.

My script:

jQuery.fn.PlayMovieHome = function () {
    alert("something");
    var co = $(this).children("a").children("img").attr("src").split('images/')[1].split('.')[0];
    var odkaz = $(this).children("a").attr("href");
    $(this).children("a").after("<div id='video' style='position:absolute;width:163px;height:123px;top:5px;'><embed type='application/x-shockwave-flash' src='http://pacogames.com/games/videos/" + co + ".swf' width='163' height='123' wmode='transparent'></embed><a href='" + odkaz + "'><img src='http://pacogames.com/images/163x123.gif' style='position:absolute;left:0px;width:163px;height:123px;top:5px;'></a></div>");
};

jQuery.fn.StopMovieHome = function () {
    $(this).children('#video').remove();
};

And:

$("div#games").on('mouseenter', '.videobox', function () {
    var element = $(this);
    $(element).data('timeouthra', setTimeout(function () {
        $(element).PlayMovieHome();
    }, 250));
});

$("div#games").on('mouseleave', '.videobox', function () {
    var element = $(this);
    clearTimeout($(element).data('timeouthra'));
    $(this).StopMovieHome();
});

And html looks like this:

<div id="games">
  <li id="videobox-id" class="videobox">
    <a href="/games/nascar.swf">    
    <img class="BOXGAMES_IMG" src="./images/nascar.png" alt="play nascar" style="position: relative; z-index: 1;" /><br />Nascar Racing
    </a>
  </li>
</div>

It dont work. does anybody knows why? what am i missing?

Probably not related but in your HTML you seem to have an LI with no parent UL element. Not valid HTML. Also a rogue apostrophe and semi-colon in your HTML. — Billy Moat, Mar 04 '13 at 12:36
I think you should use var element = $(this) and then $(element), element is already a jQuery object — pdjota, Mar 04 '13 at 12:37
I have UL element, this is only truncated entry. And apostrophe and semi-colon is only relic of my php echo. — Janko Gogy Vodila, Mar 04 '13 at 12:45

score 1 · Answer 1 · answered Mar 04 '13 at 12:35

1

Try this:

$("div#games").on('mouseenter', '.videobox', function () {
    var element = $(this);
    element.data('timeouthra', setTimeout(function () {
        element.PlayMovieHome();
    }, 250));
});

$("div#games").on('mouseleave', '.videobox', function () {
    var element = $(this);
    clearTimeout(element.data('timeouthra'));
    element.StopMovieHome();
});

answered Mar 04 '13 at 12:35

palaѕн

72,112
17
116
136

Does it change anything? as far as I know if you pass a jQuery object it just return the same object and should not change anything. – Onur Topal Mar 04 '13 at 12:46
Nothing happend. This is real sample: http://pacogames.com/ The games in category (a little bit down) should show the video when you are over them. But still nothing. – Janko Gogy Vodila Mar 04 '13 at 12:47
The problem is with this onmouseneter because alert("something") in playmoviehome don't work. – Janko Gogy Vodila Mar 04 '13 at 12:50

jquery .on method don't work

1 Answers1