在點擊，顯示選擇，在選擇更改顯示文本

Question

我試圖做一些事情，你可以動態插入一個HTML塊，如果你點擊某些單詞出現一個選擇框，你可以選擇你想要的項目喜歡替換這個詞。一旦從選擇列表中選擇了該項目，文本值就會出現在該字詞以前的位置。

我只是遇到了最後一部分的麻煩 - 即。選擇該項目並獲取該項目的文本以替換選擇框。

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，但是，一旦你更換內容，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()); 
    }); 
});