クリックするとselect select on、select selectの変更を表示する

Question

HTMLブロックを動的に挿入できる場所を作成しようとしています。特定の単語をクリックすると、選択するボックスが表示されます単語を置き換えるのが好きです。選択リストからアイテムが選択されると、以前に使用されていた場所にテキスト値が表示されます。

私はちょうど最後の部分に問題があります。項目を選択し、その項目のテキストを取得して選択ボックスを置き換えます。あなたは全体thisを使用している

var these_labels = "<select><option>Replacement A</option><option>Replacemnet B</option><option>Replacement C</option></select>"; 
$(".add").live('click', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 

    $("#area").append("<div class='entry'>IF: <span class='label'>ANY</span></div>"); 
}); 

$(".label").live('click', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 

    $(this).replaceWith(these_labels); 
    $(this).change(function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 

     $(this).replaceWith($(this).find(":selected").text()); 
    }); 
}); 

Answer 1

あなたがコンテンツを交換すると、しかし、thisはもはや適切ではありません。挿入するアイテムへの参照を保持して、具体的に物事を添付できるようにする必要があります。

更新：更新されたコードは次のようなものでなければなりません：私は、選択した値で、元のテキストを置き換えることができるようにどのように私はそれを修正することができ

$(".label").live('click', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    var labels = $(these_labels); 
    $(this).replaceWith(labels); 
    labels.change(function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 
     // this one is fine because it is not being referenced later 
     $(this).replaceWith($(this).find(":selected").text()); 
    }); 
});