Question

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!

Answer 1

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.