CODEWITHSUNDEEP
javascriptjqueryformstwitter-bootstraptabs
okelet
okelet

Reputation: 756

Add/remove existing form fields without loosing events

I have a form with some tabs. This form creates a new user, or edits an existing user. If the user is new, I want to have in the main tab some fields that in a edit form is in other tabs, but keeping the fields in the original tab. I have done this by monitoring the selected tab, and adding or removing fields. But if a form field has associated some events, when I remove it and add to other tab, the events are lost. For example:

Fiddle: http://jsfiddle.net/p3tkL/

<div id="tabs" class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#tab_personal" data-toggle="tab"> Personal</a></li>
        <li class="active"><a href="#tab_mail" data-toggle="tab"> Mail</a></li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane" id="tab_personal">
        <p>Personal info tab</p>
        <div id="personal_mail_div">
        </div>
    </div>
    <div class="tab-pane active" id="tab_mail">
        <p>Mail Tab</p>
        <div id="mail_container">
            <div id="mail_address_div">
                Mail address: <input id="mail_address" type="text" />
            </div>
        </div>
    </div>
</div>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

$(document).ready(function() {

    $("#mail_address").keyup( function() {
        console.log("text changed, new value: " + $(this).val() );
    });

    $("#tabs").on('shown', function (e) {

        var previousDiv = $(e.relatedTarget).attr('href');
        var newDiv = $(e.target).attr('href');

        // OUs / Servicios
        if ( ( newDiv == "#tab_personal" ) || ( newDiv == "#tab_mail" ) ) {

            var divaddremove = $("#mail_address_div");
            if ( newDiv == "#tab_personal" ) {
                $("#mail_container").empty();
                $("#mail_container").hide();
                $("#personal_mail_div").append(divaddremove);
                $("#personal_mail_div").show();
            }
            else if ( newDiv == "#tab_mail" ) {
                $("#personal_mail_div").empty();
                $("#personal_mail_div").hide();
                $("#mail_container").append(divaddremove);
                $("#mail_container").show();
            }

        }

    });

});

});//]]>  

</script>

So, when the page loads initially, the text changed event in the mail fields has its event fired, but when i change the tab, the field is removed from the mail tab and added to the personal tab correctly, but the events are no more fired. How can I solve this?

Regards and thanks in advance.

Update:

Well, the initial solutions using delegates don't work for me, as the example I did is not exactly what I am doing. I am using select2 to make select inputs search by ajax. When I remove and then add the selects, it stops working. Here is another fiddle showing the effect.

http://jsfiddle.net/p3tkL/2/

Upvotes: 1

Views: 163

Answers (3)

Thomas
Thomas

Reputation: 8849

You can use delegated events:

$('.tab-content').on('keyup', '#mail_address', function(){
    console.log("text changed, new value: " + this.value);
});

Or have a look at detatch

Upvotes: 1

muneebShabbir
muneebShabbir

Reputation: 2538

change your keyup binding code to this

$(".tab-content").on("keyup", "#mail_address", function() {
        console.log("text changed, new value: " + $(this).val() );
    });

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Use jQuery event delegation

Demo -- > http://jsfiddle.net/p3tkL/1/

$('.tab-content').on('keyup', '#mail_address', function(){
      console.log("text changed, new value: " + this.value);
  });

Upvotes: 0

Related Questions