Question

While on jquery click event got value for first time but second time it comes to empty

JS:

$(".topPanel").live('click', (function(e) {

    form = $(e.target).attr("name");
    content = $("." + form);    
    $(".show_panel1").html("");
    $(".show_panel1").html(content);
    $(".show_panel1").show();

}));

HTML:

 <div class="topPanel"  >
   <span id="5" name="panther" style="background: #990000;" class="span_1">  
                   Panther</span>
   <span id="6" name="lion" style="background: #009900;" class="span_1">
                   Lion</span>         
 </div>

 <div class="show_panel1" >
     <label class="label">welcome</label>
 </div>
 <div class="tiger" >
     <label  class="label">i am panther</label>
 </div>
 <div class="lion" >
     <label  class="label">i am lion</label>
 </div>​

CSS

.label
{
    font-family: Verdana; 
    font-size: medium;
    font-weight:lighter; 
    color: #FF990000;
    float:inherit;
    margin:10mm;
}

.topPanel
{
    float: left; 
    color:#000000;
    background: none repeat scroll 0% 0% orange; 
    width: 1280px;
    margin: 10px 5px 5px 10px;
}

.span_1
{
   float: left; 
    height: 40px; 
    width:5%; 
    padding:20px;
    margin: 0px 5px 0px 0px;
}

​

Answer 1

These two lines don’t make sense:

content = $("." + form);    
$(".show_panel1").html(content);

content is a jQuery object. You can’t put a jQuery object into the html of another object. Perhaps you meant:

var content = $("." + form);    
$(".show_panel1").html(content.html());

This would get the HTML from the content object and put it into .show_panel1. Note, I also declared the content variable to be a local variable rather than allowing it to be an implicit global variable which is bad.

---

Please show us the HTML that contains class="form" so we can see what you’re actually trying to do here.

Also, .live() has been deprecated (you should no longer use it). Replace it with .on() (for recent versions of jQuery) or .delegate() (for older versions of jQuery).