Images disabled on populating data

Question

function a()
{
   var r1 = '<div id="title_t" style="display:inline;font-size:150%;color:white;" > </div><div name="btbar" id="bottom_bar" style="position: absolute; margin-left: auto;margin-right:auto;;">' ;
   r1 = r1 + '&nbsp&nbsp<img  src="first.png" " />';
   r1 = r1 + '&nbsp&nbsp<img  src="prev.png"  />';
   r1= r1 +  '<label id="cnt"></label>' ;
   r1= r1 + '<img  alt="Next" src="nxt.png" ' ;
   r1= r1 + '<img  alt="Last" src="nt.png/>" ' ;
   r1= r1 + '<img src="stop.png/>"' ;
   r1= r1 + '</div><div style="width: 50%;"><img  style="margin-right:1cm;" src="hi.gif" title="hi" onclick="hi();" /></div>'
}

function b()
{
  var details=name;
  $("#cnt").html(name) ;
}

a();
b();

In the above code, when label (id=cnt) details are populated the buttons next.png,nt.png,stop.png becomes disabled in firefox.Can some on tell me whats happening here.

thanks..

Answer 1

Those aren't buttons, they're images. If they're clickable because you've bound event handlers to them, then of course those handlers are lost when you reload the DOM. Try using the jQuery live() functionality to bind your handlers. (I'm just guessing as to the problem, because your example code has errors in it that I assume are from transcription, and your description of the problem is really vague.)

Answer 2

Well, as pointy mentioned there are a bunch of typos in function a() to start with. I'm not even sure you can set a margin using centimeters. Also, img elements should always have an alt attribute, and where does the name variable get populated that you assign details to?

At any rate, here's function a with corrections:

function a()
{
   var r1 = '<div id="title_t" style="display:inline;font-size:150%;color:white;" > </div><div name="btbar" id="bottom_bar" style="position: absolute; margin-left: auto;margin-right:auto;">';
   r1 = r1 + '&nbsp;&nbsp;<img src="first.png" />';
   r1 = r1 + '&nbsp;&nbsp;<img src="prev.png"  />';
   r1= r1 +  '<label id="cnt"></label>' ;
   r1= r1 + '<img alt="Next" src="nxt.png" />';
   r1= r1 + '<img alt="Last" src="nt.png" />';
   r1= r1 + '<img alt="Stop" src="stop.png" />';
   r1= r1 + '</div><div style="width: 50%;"><img style="margin-right:1px;" src="hi.gif" title="hi" onclick="hi();" alt="hi" /></div>'
}