CODEWITHSUNDEEP
jquerycssdynamicstyling
user1919802
user1919802

Reputation: 7

jQuery dynamic element - styling not being applied

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

Upvotes: 0

Views: 15120

Answers (4)

David Goss
David Goss

Reputation: 707

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>");
});

Upvotes: 0

Tomas Santos
Tomas Santos

Reputation: 550

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
}

Upvotes: 0

JohnJohnGa
JohnJohnGa

Reputation: 15685

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");
});;

Upvotes: 6

fmgp
fmgp

Reputation: 1636

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
   }
});

Upvotes: 1

Related Questions