CODEWITHSUNDEEP
jquerygoogle-chrome
Sharon
Sharon

Reputation: 3919

Click event not working on Chrome, but fine in Firefox

My code has uses jquery to add an element to a page, and then add a 'click' event to it. The code is:

$('.photosItem').mouseover(function() {
        // Remove all existing comment buttons
        $('.reelPhotoPageCommentLink').remove();
        // Add a comment button
        var commentButton = "<div class='reelPhotoPageCommentLink'>";
        commentButton += "Comment";
        commentButton += "</div>";
        $(this).prepend(commentButton);
        // Add click event to comment button
        $('.reelPhotoPageCommentLink').click(function() {
            $('#editPopupForm').remove();
            // Get photo id
            var photoID = $(this).parent().attr('photo_id');
            var url = "get_photo_comment_form/" + photoID;
            $.ajax({ 
                url: url,
                type: "POST",
                success: function(data) {
                    // Add item after header
                    $('#header').after(data);
                }
            });
        });
    });

So, when you hover over a photo with class "photosItem", a 'comment' button appears. Clicking on the button pops up the comment box. This works fine on Firefox, but I'm having trouble on Chrome, which doesn't seem to pick up the click event. It adds the comment button when I hover, but clicking it doesn't do anything. There are no errors in the console at any stage.

I added a console.log after $('.reelPhotoPageCommentLink').click(function() {, and it's not showing up, so it looks like the click event is being ignored.

Anyone have any ideas how I can get this to work? It's fine in Firefox, and there are no warnings or errors there.

Thanks!

Upvotes: 2

Views: 10618

Answers (3)

Sharon
Sharon

Reputation: 3919

I gave up on this in the end.

Instead, I've generated the buttons with the click events when the page loads, but kept them hidden. The rollover then shows the buttons rather than generating them.

Thanks for the help codeparadox and Malevolence. It's also handy to know about jsfiddle - I'm sure I'll use that again.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

As you added .reelPhotoPageCommentLink to DOM dynamically, i.e after DOM load so you need delegate event handler.

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {

});

Though your code is working on some browsers, but above is the correct procedure.

It would be better if you place above click handler code outside of mouseover event, binding any event within another event is not good idea.

Full code will look like:

// Add click event to comment button

 $('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {
    $('#editPopupForm').remove();
    // Get photo id
    var photoID = $(this).parent().attr('photo_id');
    var url = "get_photo_comment_form/" + photoID;
    $.ajax({ 
        url: url,
        type: "POST",
        success: function(data) {
            // Add item after header
            $('#header').after(data);
        }
    });
});

$('.photosItem').mouseover(function() {
    // Remove all existing comment buttons
    $('.reelPhotoPageCommentLink').remove();
    // Add a comment button
    var commentButton = "<div class='reelPhotoPageCommentLink'>";
    commentButton += "Comment";
    commentButton += "</div>";
    $(this).prepend(commentButton);
});

Upvotes: 4

Malevolence
Malevolence

Reputation: 1857

Attaching an event handler on mouseover seems like a bad idea. You should probably use the delegate event programming model that attaches the event handler at a higher level in the DOM and can handle dynamically added content. e.g.

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function(e) {

});

Upvotes: 1

Related Questions