CODEWITHSUNDEEP
javascriptjqueryonclickdocument-ready
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

Why is the onclick function not working?

I'm trying to simply get an index of which child element .video-thumbnail was clicked in the div #thumb using jQuery. In the debugger, what happens is when the page first loads, it goes to the on.('click'...) function and hovers over it twice, then I made another test with a $(document).ready(...) and did the same thing, hovered over twice before stepping over and completely loading the page giving an alert box of -1 (which means video-thumbnail element doesn't exist). Then I proceeded to click one of the .video-thumbnail element, but it didn't fire anything. The only time it fired again was when I modified the jQuery selector to: ("#thumb").on('click', function(){...});, it selected and returned the correct index.

It even works fine in the jsfiddle dynamically creating the thumbnails and wasn't able to replicate the error from my localhost page. I don't understand why the same results wouldn't work on localhost.

I checked my page for any errors, but everything runs fine. What could be wrong? Is there another alternative to get the index results working?

JS:

$(document).ready(function()
{
    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + ' / Views: ' + "24" + '</p></div>';
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + ' / Views: ' + "42" + '</p></div>';

    $('#thumb').append(vidThumbnail);
    $('#thumb').append(vidThumbnail2);

    //$("#thumb").on('click', function() WORKS AND FIRES the onclick() when clicked on after page loaded
    $("#thumb .video-thumbnail").on('click', function()
    {
        console.log($("#thumb .video-thumbnail").index(this)); 
        alert($("#thumb .video-thumbnail").index(this)); // return index that was clicked
    }); 
});

Upvotes: 0

Views: 220

Answers (2)

Chris
Chris

Reputation: 997

I think you are using on wrong. You should rather bind it to a top level element like so:

$('body').on('click', '.video-thumbnail', function(){
});

I added it in your jsfiddle: https://jsfiddle.net/wh501p71/1/

Upvotes: 1

&#214;zg&#252;r Ersil
&#214;zg&#252;r Ersil

Reputation: 7013

should do any operation inside of the dom loaded ready event in the below example. you should check click events and this definition in jquery docs. 

$(document).ready(function()
{

    var vidThumbnail = '<div><div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/Vpg9yizPP_g/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 1" + '</a><br/>' + "1:30" + ' / Views: ' + "24" + '</p></div>';
    var vidThumbnail2 = '<div class="video-thumbnail"><a target="_blank" href="#"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="https://i.ytimg.com/vi/YE7VzlLtp-4/default.jpg" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="#">' + "Example Thumbnail 2" + '</a><br/>' + "0:36" + ' / Views: ' + "42" + '</p></div></div>';

    $('#thumb').append(vidThumbnail);
    $('#thumb').append(vidThumbnail2);


    $("#thumb .video-thumbnail").click(function(e){
        alert($(this).index()); // return index that was clicked
    })

});

Upvotes: 1

Related Questions