Question

I’m trying to make something where you can dynamically insert an HTML block, and if you click on certain words a select box appears where you can select the item that you would like to replace the word. Once the item has been selected from the select list, the text value appears where the word used to be.

I’m just having trouble with the last part – ie. selecting the item and getting the text of that item to replace the select box.

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

You are using this throughout, however, once you replace the content, this is no longer appropriate. You’ll need to keep references to the items your inserting so you can attach things to them specifically.

Update: Your updated code should be something like:

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