QA@IT
«回答へ戻る

回答を投稿

前者は、ボタンを押す度に毎回同じオブジェクトを追加しようとしているためです。

例えば、次のように同じオブジェクトを2回追加しているのと同じだからです。

    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa);
            $('#hoge').append(aaa);
        });
    });

後者は outerHTML で一旦文字列にすることで append の中で DOM オブジェクトが再構築されているためです。つまり clone しているのと同じです。

例えば、次のようにしても動作します。

    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });

なお、↑のコードだと ui 要素の id 属性まで複製されているので、要素を追加したときに id が重複してしまいます(もとの要素の id も hoge だし、追加した要素の id も hoge)。

なので、次のように id 属性を削除してやるか、

    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        aaa.removeAttr('id');
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });

あるいは、もう1段上の要素の id を指定して、

<div id="hoge">
    <ul>
        <li>
            <select name="example">
                <option value="サンプル1">サンプル1</option>
                <option value="サンプル2">サンプル2</option>
                <option value="サンプル3">サンプル3</option>
            </select>
            <div class="col-lg-3 btn-area">
                <button id="btn" class="btn">追加</button>
            </div>
        </li>
    </ul>
</div>

複製する要素に id 属性が含まれないようにする方が良いです。

    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge > ui'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });

あ、button 要素にも id 属性がありますね。これもどうにかする必要があります(不要なら id 属性を削除するとか class 属性で代替するとか)。

上記部分を理解する上で、「こういうところ勉強したほうがいいよ!」というアドバイス

素の JavaScript とか素の DOM とかでしょうかね? jQuery に隠蔽されていると jQuery しか判らなくなってしまうかもしれないので。

前者は、ボタンを押す度に毎回同じオブジェクトを追加しようとしているためです。

例えば、次のように同じオブジェクトを2回追加しているのと同じだからです。

```js
    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa);
            $('#hoge').append(aaa);
        });
    });
```

後者は `outerHTML` で一旦文字列にすることで `append` の中で DOM オブジェクトが再構築されているためです。つまり `clone` しているのと同じです。

例えば、次のようにしても動作します。


```js
    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });
```

なお、↑のコードだと ui 要素の id 属性まで複製されているので、要素を追加したときに id が重複してしまいます(もとの要素の id も hoge だし、追加した要素の id も hoge)。

なので、次のように id 属性を削除してやるか、

```js
    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true);
        aaa.removeAttr('id');
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });
```

あるいは、もう1段上の要素の id を指定して、

```html
<div id="hoge">
    <ul>
        <li>
            <select name="example">
                <option value="サンプル1">サンプル1</option>
                <option value="サンプル2">サンプル2</option>
                <option value="サンプル3">サンプル3</option>
            </select>
            <div class="col-lg-3 btn-area">
                <button id="btn" class="btn">追加</button>
            </div>
        </li>
    </ul>
</div>
```

複製する要素に id 属性が含まれないようにする方が良いです。

```js
    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge > ui'
        });
        var aaa = $(settings.master).clone(true);
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa.clone());
        });
    });
```

あ、button 要素にも id 属性がありますね。これもどうにかする必要があります(不要なら id 属性を削除するとか class 属性で代替するとか)。

> 上記部分を理解する上で、「こういうところ勉強したほうがいいよ!」というアドバイス

素の JavaScript とか素の DOM とかでしょうかね? jQuery に隠蔽されていると jQuery しか判らなくなってしまうかもしれないので。