QA@IT
«質問へ戻る

質問を投稿

javascript(jquery)について

javascript(jquery)について
初めまして。javascriptを頑張って勉強しています。
そこで下記コードがなぜ動かないのかどうしてもわからないので質問させていただきます。
下記HTMLコード

<ul id="hoge">
    <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>

jqueryコード

    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true); //li以下をクローン。このオブジェクト?を使い回したい。
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa);
        });
    });

上記コードだと一回目ボタンをクリックしたときにselectボックスとボタンが
追加されます。
しかし、2回目以降ボタンをクリックしても追加されません。

下記コードだとボタンを押した数だけli以下のコードが追加されます。

    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[0].outerHTML);
        });
    });

$('#hoge').append(aaa)と$('#hoge').append(aaa[0].outerHTML)違いはなんでしょうか?
なぜ$('#hoge').append(aaa)だと2回目以降追加されないのでしょうか?

jsを理解してないからだと思うのですが、どうかお分かりのかた教えて頂けると幸いです。
また、上記部分を理解する上で、「こういうところ勉強したほうがいいよ!」というアドバイスを頂けると幸いです。

javascript(jquery)について
初めまして。javascriptを頑張って勉強しています。
そこで下記コードがなぜ動かないのかどうしてもわからないので質問させていただきます。
下記HTMLコード
```
<ul id="hoge">
    <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>
```
jqueryコード
```
    jQuery(document).ready(function () {
        var settings = $.extend({
            master: '#hoge'
        });
        var aaa = $(settings.master).clone(true); //li以下をクローン。このオブジェクト?を使い回したい。
        console.log(aaa);
        $('button').on('click',function(){
            $('#hoge').append(aaa);
        });
    });
```
上記コードだと一回目ボタンをクリックしたときにselectボックスとボタンが
追加されます。
しかし、2回目以降ボタンをクリックしても追加されません。

下記コードだとボタンを押した数だけli以下のコードが追加されます。
```
    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[0].outerHTML);
        });
    });
```
 $('#hoge').append(aaa)と$('#hoge').append(aaa[0].outerHTML)違いはなんでしょうか?
なぜ$('#hoge').append(aaa)だと2回目以降追加されないのでしょうか?

jsを理解してないからだと思うのですが、どうかお分かりのかた教えて頂けると幸いです。
また、上記部分を理解する上で、「こういうところ勉強したほうがいいよ!」というアドバイスを頂けると幸いです。