Scott Scott - 3 months ago 7
jQuery Question

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

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.)

Answer

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>