using jQuery and style dynamically

Question

I have a problem with this code: if you click the "appened text" twice you will get 2 divs one with content of "hello2" and one with "hello3", but for some resone when you click on them they open the same block. insted of having each of them opening his own block.(I want to keep it dynamically created.) thanks for the help

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
var k=1;
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
function appendText()
{
  k=k+1;
  var css = '#flip'+k+' { padding:5px; text-align:center; background-color:#ffff00;   border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  var css = '#panel'+k+'{padding:50px;display:none;text-align:center; background-   color:#'+k+''+k+''+k+''+k+''+k+''+k+'; border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);

  var flip2 = document.createElement("div");
  flip2.innerHTML = "Hello"+k;
  flip2.id = ("flip"+k);

  var panel2= document.createElement("div");
  panel2.innerHTML = "Hello"+k;
  panel2.id = ("panel"+k);

  document.body.appendChild(flip2);
  document.body.appendChild(panel2);

  $(document).ready(function(){
    $(("#flip"+k)).click(function(){
      $(("#panel"+k)).slideToggle("slow");
    });
  });
}
</script>

<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>


<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>

try to make a demo on jsfiddle.net

phnkha
– phnkha

2013-01-01 16:03:08 +00:00
Commented Jan 1, 2013 at 16:03 — phnkha
– phnkha, Commented Jan 1, 2013 at 16:03
Whats with the variable k?

Nate-Wilkins
– Nate-Wilkins

2013-01-01 16:04:38 +00:00
Commented Jan 1, 2013 at 16:04 — Nate-Wilkins
– Nate-Wilkins, Commented Jan 1, 2013 at 16:04
@Nate it's there to make the code not work :-)

Pointy
– Pointy

2013-01-01 16:07:49 +00:00
Commented Jan 1, 2013 at 16:07 — Pointy
– Pointy, Commented Jan 1, 2013 at 16:07
Why mixing jQuery and plain js when dealing with DOM?

moonwave99
– moonwave99

2013-01-01 16:08:55 +00:00
Commented Jan 1, 2013 at 16:08 — moonwave99
– moonwave99, Commented Jan 1, 2013 at 16:08

Pointy · Accepted Answer · 2013-01-01 16:05:55Z

2

The problem is that your variable k is global. When it changes, then your event handlers all see the same value (first 2, then 3, then 4, etc).

Set up your event handlers like this:

(function(kk) {
  $(("#flip"+kk)).click(function(){
    $(("#panel"+kk)).slideToggle("slow");
  });
})(k);

There's no reason to use a "ready" handler at all inside the function that adds the elements.

answered Jan 1, 2013 at 16:05

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jadkik94 Over a year ago

You understood what k is!

Collectives™ on Stack Overflow

using jQuery and style dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related