CODEWITHSUNDEEP
jqueryajaxinternet-explorergoogle-chromeclick
Jason Mayoff
Jason Mayoff

Reputation: 77

JQuery .click() works in Firefox but not chrome or IE

EDIT: Just to be clear, it's not the jsfiddle that I have a problem with. That works fine for me in all browsers, it's the actual implementation on my website which uses the exact code below.

I have a block of 8 dynamically-generated YouTube thumbnails on a page, and a player div. When I click on one of the thumbnails, I want the associated video to ajaxly play in the player div. The following code works in FF, but not IE or Chrome.

$(document).ready(function(){


    $('.vidlink').click(function (event) {
            event.preventDefault();
            var addressValue = $(this).attr("href");
            alert(addressValue);

            iFrame = "<iframe width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/"+addressValue+"\" frameborder=\"0\" allowfullscreen></iframe>";


            newDiv = "<div id=\"vidPlayer\">" + iFrame + "</div>";


            $('#vidPlayer').replaceWith(newDiv);

        });

});

This is pretty much what I'm trying to do (JSFiddle).

It did not work in FF either, until I changed the double-quotes surrounding $('.vidlink') to single quotes. I tried that with the $(this).attr("href") but that broke it again on FF.

Upvotes: 1

Views: 4270

Answers (3)

saeta
saeta

Reputation: 4238

tries to use the Youtube API is very easy include one video, thus would you avoid errors.

A simple example can be found in https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Upvotes: 0

Jace
Jace

Reputation: 3072

  • code looks good
  • the console spits out no errors
  • works in JSFiddle
  • quotes seem to make a difference (totally not possible, this screams to me: "you're looking in the wrong place!")

Things to check:

  • It might pay to step back and look at the surrounding code
  • ensure that there is no code that could possibly be unbinding your event. If there is, set up some debuggers/breakpoints/console.logs around it
  • set some debuggers/breakpoints/console.logs inside your event function
  • ensure your files are not being cached. If your JavaScript is in an external file, another thing I would do is navigate directly to that file and cache-refresh there.
  • ensure you are viewing the correct version of your site (eg. not editing a local version, then viewing an external version)
  • review all of your assumptions about what you think is happening

I'm 99% sure that the issue is not with the code you posted. I think what you've got is one of those errors, that when it finally works you'll be forever palming your face and losing sleep at night. We all do it!

Upvotes: 3

Ringo
Ringo

Reputation: 5473

It's working for me in FF and Chrome and IE. The single-quotes or double-quotes shouldn't make any difference. The fact that you think it does makes me think you're not testing properly. Make sure you clear the cache in each browser. Or at least hit Refresh a couple of times before you decide whether it's working properly or not.

Upvotes: 1

Related Questions