Geek asks and answers

How to change background color of dynamically created paragraph in jQuery?

I want the user to be able to .hover () paragraphs individually with (for example: "border: 1px solid # 900;") and be able to individually click on it to add / change the background color ("select") and click more times to return the default background color ("paragraph absinthe"). These paragraphs are dynamically created, and it is difficult for them to find it, since I am new to Javascript and jQuery.

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

This is Im code that works 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 I'm trying to execute. Any help would be appreciated!

+3
source share
4 answers

, , , . , . . , , , , , .

, , jQuery :

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

JSFiddle, : http://jsfiddle.net/RzvV5/16/

Edit

P.S , jQuery, , , stackoverflow, . , , : JSFiddle, , . :)

+2

JQuery, . , . , . , . , . . , !

$(document).ready(function(){
    $("#push").on({
        click: function(){
            $('<p>Test</p>').css("background-color","red").appendTo('.Test');
        }
    });

$('.Test').on("click", "p", function(){  
    var cur = $(this).css('background-color');
    if(cur=="rgb(255, 0, 0)") {  
        $(this).css("background-color","blue");
    } else {                      
        $(this).css("background-color","red");
    }
    });
});

: .live(), .

+1

, , (.Test) p :

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

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

.on is similar to .live in that it can efficiently attach event handlers to dynamically created elements, however it is much more efficient because it does not bind handlers to the root document. Here's an explanation of the various methods for handling events in jQuery 1.7 (along with why and how you should use .on): http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live. html

0
source

Here is the fiddle I created:

http://jsfiddle.net/RzvV5/80/

Hope this helps.

thank

Anirban

0
source

More articles:


All Articles