jquery - jqueryはdivコンテンツをhtml（）に置き換えます

Question

div のコンテンツを、クリック イベントにバインドされた新しいコンテンツに置き換えようとしています。

JSFIDDLE

appendTo()代わりに使用すると機能しますhtml()が、古いコンテンツをクリアする必要があるため、なぜこれが正常に機能しないのか少し混乱しています

Answer 1

contentの代わりにをselector使用している場合は、ID セレクターを使用する必要があります。あなたはこのようにすることができますselectorcontent#

ライブデモ

function showitnow() {
    var div_data = "<div ><a href='XXX'>XXX</a></div>";
    $("#test1").html(div_data);

}

$("#button1").click(function() {
     showitnow();
});
​

Answer 2

あなたはあなたのフィドルにいくつかの間違いがあります、それはこのようになるはずです：http: //jsfiddle.net/pCckh/3/

function showitnow() {
    var div_data = "<div ><a href='XXX'>XXX</a></div>";
    $("#test1").html(div_data);
   //  ^---selector----^----------your content
}

$("#button1").click(function() {
    showitnow();
 // ^----------------remove the var and just call the function when click the button
});

Answer 3

多分あなたはこれを試すことができ
ます..JQueryを親と子として再生します..

<div id="Destination"> 
    <div class="child_content"> item 1 </div>
    <div class="child_content"> item 2 </div>
</div>

    <div id="Source"> 
    <div class="child_content"> item 1 </div>
    <div class="child_content"> item 2 </div>
</div>

      <script type="text/javascript"> 
        $(document).ready(function(){
            $("#Source .child_content").click(function(){
                $(this).parent().remove();
                $(this).appendTo("#Destination");
            });
        });
    </script>

これが役立つことを願っています..

Answer 4

ぜひご覧ください！期待される結果...

同じ例で必要な変更はわずかです。

<div id = 'div_data'>
<button id="button1">BUTTON1</button>
div>

<div id="test2"></div>