Home/ Questions/Q 7807445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T02:51:27+00:00

I want the user to be able to .hover() the paragraphs individually with (example:

  • 0

I want the user to be able to .hover() the paragraphs individually with (example: “border: 1px solid #900;”) and be able to click it individually also to add/change the background color (“select paragraph”) and click again to return default background color (“diselect paragraph”).
This paragraphs are dynamically created and im having a hard time to get it since i’m new to Javascript and jQuery.

http://jsfiddle.net/RzvV5/8/

This is the code Im working with:

jQuery

$(document).ready(function(){
$("#push").on({
    click: function(){
        var pr = $('<p class="test">Test</p>');
        var d = $(".Test");
        $(pr).clone().appendTo(d); 
    }
});

$("p").on({
          mouseenter: function(){    
                     $(this).addClass("inside"); 
          },
          mouseleave: function(){                             
                     $(this).removeClass("inside");  
}

});



});

Html code:

<html>
<body>
    <a href="#" id="push">Push</a>
<div class="Test"></div>
    </body>
</html>

Css code:

.test { color: #000; padding: .5em; border: 1px solid black;} 
.active { background-color: ;}
.inside { background-color: #900; }

This code is just an example of what im trying to accomplish.
Any help will be appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So what is happening here is that in your code, you define a function to create a paragraph and then set it’s properties. Do note that, you ‘define a function’. That alone doesn’t make any paragraphs. So when you set event handlers for all paragraphs, it doesn’t really matter because the paragraphs you care about don’t exist yet.

    This is what you could do, change your jQuery part to:

    $(document).ready(function(){
    $("#push").on({
        click: function(){
            var pr = $('<p class="test">Test</p>');
            var d = $(".Test");
            var pclone = $(pr).clone();
            pclone.on({
                mouseenter: function(){    
                    $(this).addClass("inside");
                },
                mouseleave: function(){                             
                    $(this).removeClass("inside");  
                }
            });
            pclone.appendTo(d);
        }
    });
});

    I have edited your JSFiddle a bit further for you to check out the results: http://jsfiddle.net/RzvV5/16/

    Edit

    P.S As you’ve mentioned you’re new to jQuery and you seem to be a new user to stackoverflow as well, I commend you for a perfectly asked question. Proper code example, introduction with problem statement and a proof of your own effort, and the best part: a JSFiddle link so that I could check if my answer was right or not. Great going 🙂

    • 0