multiple use of 'html()' in jQuery

works first time, but not subsequent

[sssweb]

I'm using jquery to change the html content of a div when certain buttons are clicked. The code works fine on the first change. But if I then click a different button to change it to something else, I get a blank div (no text). I know all buttons work because when I try each of them first, they change the content correctly.

Do I have to re-set something after each change to get the next one to work?

Here's sample code I'm using:

$( "#button1" ).click(function() {
var htmlStr = $( "#text2" ).html();
$("#change-div").html(htmlStr);
});

[Fotiman]

Works for me. Here's a jsfiddle that demonstrates it:
[jsfiddle.net...]

[sssweb]

Thanks Fotiman - I had all text variations in different <p> tags w/in <div> change-div. Not sure why that's a problem, but it works when I use separate divs like you did.

[Fotiman]

Not sure I understand what you mean. Did you have something like this?

<div id-"change-div">
  <div id="text2">2...</div>
  <div id="text3">3...</div>
</div>

In other words, is the source of the text that you're copying to change-div nested within change-div to begin with? If so, that would cause a problem because after the first call, the source would no longer exist. In other words, after the first call, your DOM would become:

<div id-"change-div">
  2...
</div>

Therefore, subsequent button clicks would result in this:

var htmlStr = ( "#text2" ).html();
// htmlStr = null because #text2 no longer exists in the DOM

[sssweb]

Yes, that's exactly what I did (except I used <p id="text2">, etc, w/in <div id="change-div">.

When you explain it as you did, it's obvious why it didn't work. Thanks for that.

You guys are great -- us newbies and webmaster wannabe's really appreciate all the help you give. :)

[Fotiman]

Glad to help. :)