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

单击，显示选择，选择更改显示文本

1 个答案: