How to use a jQuery dynamically created div in multiple (simple) functions

Question

I have a simple div created via jQuery....

var split = document.createElement('div');
    split.className ="item split";
    $(split).html('<strong>SPLITTER</strong>');

I want to use the same variable in a couple simple functions. However, it seems whenever I move the variable out of the function, I can only create the div once. Then all other instances fail to insert the div.

Test the snippet, it'll probably help explain better.

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function() {
  var split = document.createElement('div');
  split.className = "item split";
  $(split).html('<strong>SPLITTER</strong>');

  $(split).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});


// Variable is created OUTSIDE the click function.
var split2 = document.createElement('div');
split2.className = "item split";
$(split2).html('<strong>SPLITTER 2</strong>');


$('#divide_btn2').on('click', function() {
  $(split2).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});

body {
  padding: 0 20px;
  margin: 0;
}
span {
  display: inline-block;
  margin: 5px;
  background: #aaa;
  color: #eee;
  padding: 5px 10px;
}
.item,
.moved,
.split {
  padding: 5px 10px;
  margin: 3px;
  background: #eee;
}
.moved {
  background: #fee;
}
.split {
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span>
</p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

Note the difference, for the "internal" button the div is created within the click function and every time I click a new div is created (as expected).

For the "external" button the variable is created outside the click function and only ONE div can be created.

Is there a way to use an external variable for a dynamic div and be able to utilize that variable in functions the same way functions operate if the variable was internal?

I'm seeking the functionality of the "internal" button.. but I want to use the same variable across all my functions and avoid the need to replicate the div creation in every single function where it's needed.

(Note the dynamic div never changes... so there's no need to edit the variable once it's set.)

I realize the slide effect isn't working here, but that' s largely irrelevant. — Scott
– Scott, Commented Aug 22, 2016 at 4:10
@Mi-Creativity yes it does.. please post that as an answer. Thank you. — Scott
– Scott, Commented Aug 22, 2016 at 4:18

Mi-Creativity · Accepted Answer · 2016-08-22 05:20:19Z

1

Updated

jsFiddle

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function() {
  var split = document.createElement('div');
  split.className = "item split";
  $(split).html('<strong>SPLITTER</strong>');

  $(split).hide(function() {
    //stuff
  }).insertAfter('.moved:last').slideDown(300);
});


// Variable is created OUTSIDE the click function.
function createSplit2() {
  var split2 = document.createElement('div');
  split2.className = "item split";
  $(split2).html('<strong>SPLITTER 2</strong>').hide();
  return $(split2);
}

$('#divide_btn2').on('click', function() {
  createSplit2().insertAfter('.moved:last').slideDown(300);
});

body { padding: 20px; }
span { display: inline-block; margin: 5px; background: #aaa; color: #eee; padding: 5px 10px;}
.item, .moved, .split { padding: 5px 10px; margin: 3px; background: #eee; }
.moved { background: #fee; }
.split { background: #aaa; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span>
</p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

edited Aug 22, 2016 at 5:20

answered Aug 22, 2016 at 4:20

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

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

10 Comments

Scott Over a year ago

Actually this fails when I need to add functions to the div. I need the div to be created, then allow actions upon it. This function works great if I only wanted the div created, but I can't seem to work out how to add additional jq functions.

Mi-Creativity Over a year ago

Oh, so basically same problem with the internal div creating? ok let me try something and see if it could help

Scott Over a year ago

Actually check the click function in my original snippet, you can see I then hide, insert, and slide the dynamic div.. I need to be able to do that still. The other answer suggesting cloning works.. but I'm always open to better implementation!

Scott Over a year ago

I worked it out... see here: jsfiddle.net/NotInUse/5qdLLuqy/3 Thanks for the help!

Mi-Creativity Over a year ago

Indeed, another implementation that might work is as in this jsFiddle

|

Scott · Accepted Answer · 2016-08-22 04:25:49Z

1

Get clone from split2

// Variable is created WITHIN the click function
$('#divide_btn').on('click', function () {
    var split = document.createElement('div');
    split.className ="item split";
    $(split).html('<strong>SPLITTER</strong>');
    
    $(split).hide(function() {
        //stuff
     }).insertAfter('.moved:last').slideDown(300);
   });



// Variable is created OUTSIDE the click function.

var split2 = document.createElement('div');
split2.className ="item split";
$(split2).html('<strong>SPLITTER 2</strong>');

$( '#divide_btn2' ).on('click', function () {
$(split2).clone().hide(function() { // Get clone from split2 *********
                      //stuff
    }).insertAfter('.moved:last').slideDown(300);
   });

body { padding: 0 20px; margin:0;}
span { display: inline-block; margin: 5px; background: #aaa; color: #eee; padding: 5px 10px;}

.item, .moved, .split { padding: 5px 10px; margin: 3px; background: #eee; }

.moved { background: #fee; }

.split { background: #aaa; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id="divide_btn">click for internal variable</span><span id="divide_btn2">click for external variable</span></p>
<div class="main">
  <div class="item">item</div>
  <div class="item moved">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  </div>

edited Aug 22, 2016 at 4:25

Scott

21.9k8 gold badges45 silver badges57 bronze badges

answered Aug 22, 2016 at 4:19

Mohammad Akbari

4,8146 gold badges52 silver badges80 bronze badges

1 Comment

Scott Over a year ago

duh.. why didn't I think of cloning.. works wonderfully in any function I need it. Thank you. (I removed the original snippet from your answer so as not to confuse matters.)

Collectives™ on Stack Overflow

How to use a jQuery dynamically created div in multiple (simple) functions

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related