複数でjQueryを動的に作成したdiv要素を使用する方法（シンプル）

Question

私はjQueryを経由して作成した簡単なdiv要素を持っている

....

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

私はカップルシンプルな機能で同じ変数を使用したいと機能。しかし、関数から変数を移動するたびに、divを一度しか作成できないようです。他のすべてのインスタンスがdivを挿入できません。

スニペットをテストすると、説明がうまくいくでしょう。

// 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>

注差は、「内部」ボタンのdiv要素は以内にクリック機能をを作成し、（予想通り）私は新しいdiv要素をクリックするたびに作成されます。

"外部"ボタンの場合は、変数が作成されます外部クリック機能は1つのdivだけ作成できます。

ダイナミックdivに外部変数を使用し、内部変数の場合と同じ方法でその変数を機能内で利用できる方法はありますか？

私は..「内部」ボタンの機能を求めているんだけど、私は同じ変数すべて間での私の機能を使用して、それはだすべての単一の関数内でのdiv作成を複製する必要性を回避したいです必要です。

（ダイナミックDIV注変わらない...ので、それが設定されていたら、変数を編集する必要はありませんでした。）

Answer 1

からクローンを取得します。更新日

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>

Answer 2

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>