0

My desired effect is for a comment delete button like what Facebook has on mouseover. The parent element is inserting a new div that will be the "delete" button on mouseover, and removing it on mouseout. My problem is, when I try to mouse over the div being inserted, it just flashes and mouseover is not called. Here is my code:

                $(".parent").mouseover(function() {

                    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");

                });

                $(".parent").mouseout(function() {

                    $(this).children(":last").remove();

                });

                $(".delete").click(function() {

                    alert("hello");

                });
3
Contributors
6
Replies
29
Views
4 Years
Discussion Span
Last Post by HelloJarvis
0

Try this:

$(".parent").hover(function() {
    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");
}, function() {
    $(this).children(":last").remove();
});

$(".delete").click(function() {
    alert("hello");
});
0

This works better for inserting and removing from the div, but the click isn't called.

0

I'm not sure but what you could try is containing the

$(".delete").click(function() {
    alert("hello");
});

part inside the first function of your hover() function.

0

No What I'm saing is you could try this (no idea if it'll work though, just a thought):

$(".parent").hover(function() 
{
    $(this).append("<div class=\"delete\" style=\"display:inline;width:20px;height:20px;background-color:blue;\">X</div>");

    $(".delete").click(function() {
        alert("hello");
    });
}, 
function() 
{
    $(this).children(":last").remove();
});

:)

Edited by minitauros

0

What I did was just have an x button be hidden for each div when the page loaded and did an onclick for that. Thank you though!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.