jQuery replace element and access that replaced element
<p>I'm in progress to learn jQuery. I want to add a feature so when user clicks on a <code>td</code> with a specified class name, I want to change it into an <code>select</code> option. And with that selected value i want to update my db.</p>

<p>Until here its okay. I can change the <code>td</code> to an <code>input</code> however, I can't add an event on change event to that replaced element.</p>

<p>Here is what I have:</p>

<pre><code>(function($) {

    var _defaults = {
        some : "defaults",
    };

    $.fn.changetoi = function(options) {

        var _opts = $.extend({}, _defaults, options);

        $(this).on('click', function() {
            var replaced = $('&lt;select name="status" class="changer"&gt;&lt;option&gt;Test&lt;/option&gt;&lt;/select&gt;');
            $(this).replaceWith(replaced);
        });

        $('.changer').on('change', function() { //here I'm try to access the changed element
            var value = $(".changer option:selected").text();
            //post the selected value
            $.post("test.php", {
                "value" : value
            }, function(data) {
                //whatever and
                $(this).replaceWith(value);
            });
        });

    };

    $('.change').changetoi();
})(jQuery);
</code></pre>

<p>and here is the fiddle for table, test and such <a href="http://jsfiddle.net/HZvH8/4/" rel="nofollow">http://jsfiddle.net/HZvH8/4/</a></p>
