Chrome extensions: Content script (jQuery) in Youtube does not work properly

Question

I have this:

$(document).ready(function() {
    $("button.yt-uix-expander-arrow").attr("id", "yt-uix-expander-arrow");
    $("#yt-uix-expander-arrow").mouseover(function() {
        alert("Hello");
    });
});

injected into Youtube. Using right click > inspect element, the <button class="yt-uix-expander-arrow"> has a id="yt-uix-expander-arrow" attribute successfully added to it. However the mouseover event does not trigger. However if I were to change $("#yt-uix-expander-arrow").mouseover() to $(".yt-uix-expander-arrow").mouseover() it works.

That's very unusual, because the #yt-uix-expander-arrow id has already been added to the button element. I tested it out on Facebook, adding a id to a class and doing a mouseover() event on the ID and it works.

Any idea?

Answer 1

Can you provide more info? What exactly are you trying to do (I mean more than the obvious)? Can you provide code in a form that is more easily testable (i.e. provide the content script or at least give a url of a page you are trying to use this code on and a summary of the content script)?

Did you try just chaining them together?

$("button.yt-uix-expander-arrow").attr("id", "yt-uix-expander-arrow").mouseover(
    function() {
        alert("Hello");
    }
 );

I set up the best test I could and your code worked fine (I think, again I'm not sure EXACTLY what you're trying to do). It's hard to say what's wrong without more context.