jQuery select, .change and .click

Question

I have a little problem with my script.

The goal: I have a select with a few options and if you choose option with value '4' select will remove and in this place I need insert input[type=text] and word "remove" in span tags. And now when you click at this span, previously inserted input and span will remove and in this place I need place my previously removed select

I hope it's make sense :-)

here my html code inside form with id=f9:

<label class="mandatory" for="ctrl_54">Title</label> 
<select class="select mandatory" id="ctrl_54" name="title">
    <option value="1">Books</option>
    <option value="2">Movies</option>
    <option value="3">Events</option>
    <option value="4">other...</option>
</select>

and my js:

function be_forms() {

    var myselect = $('form#f9 select#ctrl_54');

    if ($('form#f9').length) {
        $('form#f9 select#ctrl_54').change(function() {
            if ($(this).val() == 4) {
                $('form#f9 select#ctrl_54').remove();
                $('<input type="text" value="" class="text innyinput mandatory" id="ctrl_54" name="title" /><span class="remove">remove</span>').insertAfter('form#f9 label[for=ctrl_54]');
                $("form#f9 span.remove").click(function(){
                    $('form#f9 input#ctrl_54').remove();
                    $('form#f9 span.remove').remove();
                $(myselect).insertAfter('form#f9 label[for=ctrl_54]');
    });
            }
        });
    }

}

And now almost everythings works. I mean when I choose option with value 4 - select is remove and appear input and span. When I click at this span my select appear again and input and span are removed. But now if I choose again in my select option with value 4 - nothing happens. And I want do it again - remove select, insert input and span and so on...

Sorry for my english I not native speaker.

Solution 1

You will have to use .live() here.

$('#ctrl_54').live("change", function() {

Solution 2

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

http://api.jquery.com/live/