Question

Im creating a feature using jquery on my site that allows people to place a bookmark on a paragraph when they’re viewing an article, so if they want to come back later, they’ll know where they stopped.

When the user clicks on “PLACE A BOOKMARK”, it adds the class .placing to that link. When the user hovers over a paragraph, the script checks to see if the link has the .placing class, if it does, it fades in a div on hover that says “bookmark this paragraph”, on hover off it fades that div back out.

Right now my code is placed within a $('P').click(function... that is within the hover function, it’s caused links on the page to not fire their hover animation. So links inside paragraphs wont animate on hover because when i hover over a paragraph it’s checking for the .placing class and doing the bookmark hover function.

How would i get the hover animation to work again on links that exist within paragraphs?
and is this the best way to do it? to check for the .placing class every single time i hover over a paragraph? There’s gotta be a better way to do this, like a switch that only allows the bookmark paragraph hovering function to work when the switch is on, and not checking with every single paragraph hover.

    $('#placeBookmark').click(function () {
            $(this).toggleClass('placing')

    })

    $('p').hoverIntent(function () {
        // HOVER ON
        if ($('#placeBookmark').hasClass('placing')) {
            $(this).append('<span id="bookmarkThis">BOOKMARK THIS</span>')
            $(this).find('#bookmarkThis').stop().animate({opacity: 1.0}, 400) 

  $('p').click(function (e) {
        var newbm = $('#bookmark').offset().top
        var offset = $(this).offset();
        var top = offset.top
        var phrases = ["SUCCESS", "SWEEEEEEET MANNN", "AWESOMELY AWESOME", "NEAT-OH!", "EXCELLENT, BOOKMARK PLACED", "BOOKMARK SAVED", "YOU DID IT KID!", "WOOOHOOO", "YOU ARE WONDERFUL"];

        if ($('#placeBookmark').hasClass('placing')) {
           //$('#placeBookmark').trigger('click')
           $('#placeBookmark').removeClass('placing')

            if (top == newbm) {
               // bookmarkColorDelay = 2000
                $('#bookmarkThis').html('<span>ITS ALREADY BOOKMARKED</span> SILLY PERSON').delay(2000).fadeOut(400, function () {
                    $(this).remove()//html('BOOKMARK THIS')
                })
            } else {
               // bookmarkColorDelay = 1000
                var selectedPhrase = phrases[Math.floor(Math.random() * phrases.length)];
                $('#bookmarkThis').html(selectedPhrase).delay(1000).fadeOut(400, function () {
                    $(this).remove()//html('BOOKMARK THIS')
                })
                $('#bookmark').fadeOut(300, function () {
                    $(this).css({
                        left: offset.left - 30,
                        top: top
                    }).fadeIn(300);
                })
            }
            $(this).stop().delay(bookmarkColorDelay).animate({
                color: "#333",
                backgroundColor: "#fff"
            }, 200)
        }
    });

        } 
    }, function () {
        // HOVER OFF
        if ($('#placeBookmark').hasClass('placing')) {
            $(this).find('#bookmarkThis').stop().fadeOut(400, function(){
                $(this).remove()
            })
        }
    });

Answer 1

Use a class selector! 🙂

$('.placing').live('click', function(event) {
    // Whatever you want to do
});

$('.placing').live('hover', function(event) {
    // Whatever you want to do
});

It will work even though the class .placing is added later.