0

I have 2 Button which when clicked either add a new paragraph or remove a current paragraph. This is done using jQuery. I am also using jQuery to change the color of the paragraph text from black to red on hover. The problem that I am having is that after I add a new paragraph with jQuery, the hover effect is not being applied to it. It works for the original paragraphs but not for the ones that are being created dynamically.

When I look at the source code of the page I see that the original paragraphs have inline styles applied to them but not the ones I added via jQuery. I have been looking online for the last hour trying to find a solution but so far none have worked for me. I found some similar questions but the solutions either didn't work for me or I wasn't applying them correctly. The thing is that I literally started learning jQuery a couple of hours ago and therefore cannot be sure if i'm fixing something or making it worse. Also, most of the questions I have looked at are to do with jQuery Mobile which confuses me further as i am working on my PC.

http://jsfiddle.net/2Xh75/

HTML

<button>Add line</button>
<button>Remove line</button>

<div id="p_wrap">
    <p> Original Line </p>
    <p> Original Line </p>
    <p> Original Line </p>
</div>

jQuery

$(document).ready(function(){

    //Add line   
    $("button:nth-of-type(1)").click(function(){
        $("#p_wrap").append("<p>New Line</p>");
    });

    //Remove line
    $("button:nth-of-type(2)").click(function(){
    $("p:last-of-type").remove();
    });

    //Hover effect
    $("p").hover(
      function(){
          $(this).css("color", "red");
      },
      function(){
          $(this).css("color", "black");
      }
    );

}); // Document Ready End

Here are some of the questions I have already looked at:

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

jQuery Mobile does not apply styles after dynamically adding content

jquery styles not applied in dynamically creation

I apologize in advance since this is probably a noob question but it has me stumped and I would appreciate any help.

-Thank you

Community
  • 1
  • 1
user1919802
  • 7
  • 1
  • 2
  • 8
  • possible duplicate of [Jquery.Hover not working for dynamic Element](http://stackoverflow.com/questions/7972389/jquery-hover-not-working-for-dynamic-element) – estrar Jul 30 '13 at 12:14

4 Answers4

6

You should use .on as it will bind new elements that you will append dynamically in the DOM

$(document).on('mouseover', 'p',  function () {       
 $(this).css("color", "red");
}).on('mouseout', 'p',  function () {       
 $(this).css("color", "black");
});;
JohnJohnGa
  • 15,446
  • 19
  • 62
  • 87
1

The elements you selected was not existing when you define jQuery selector for "p", you should use "on" function:

$("p").on({
   mouseenter: function() 
   {
      //mouseover css
   },
   mouseleave: function()
   {
      //mouseleave css
   }
});
fmgp
  • 1,638
  • 17
  • 17
0

Try to use css for this type of hover effect. The reason it doesn't work with jquery is because your not delegating the event to a parent by using the .on().

Fiddle Demo

p:hover
{
    color:red
}
Tomas Santos
  • 560
  • 4
  • 12
  • I know I can do it with CSS, I just wanted to know if there was a jQuery solution. I thought that since I just started learning it maybe I was missing something. Thanks anyway for the speedy reply – user1919802 Jul 30 '13 at 12:15
0

You can do the hover effect purely with CSS --- almost always the better choice:

#p_wrap > p:hover
{
    color: red
}

Also I'd advise refactoring the click handlers using the newer preferred on syntax:

$("button:nth-of-type(1)").on("click", function(){
    $("#p_wrap").append("<p>New Line</p>");
});
David Goss
  • 677
  • 4
  • 8