在点击，显示选择，在选择更改显示文本

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()); 
    }); 
});