1

我有一个带有一些标签的表格。此表单创建新用户，或编辑现有用户。如果用户是新用户，我希望在主选项卡中拥有一些在编辑表单中位于其他选项卡中的字段，但将这些字段保留在原始选项卡中。我通过监视所选选项卡以及添加或删除字段来完成此操作。但是，如果表单字段关联了一些事件，当我将其删除并添加到其他选项卡时，这些事件就会丢失。例如：

小提琴：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>

因此，当页面最初加载时，邮件字段中的文本更改事件会触发其事件，但是当我更改选项卡时，该字段会从邮件选项卡中删除并正确添加到个人选项卡中，但事件不再存在被解雇了。我该如何解决这个问题？

提前致以问候和感谢。

更新：

好吧，使用代表的初始解决方案对我不起作用，因为我所做的示例并不完全是我正在做的。我正在使用 select2 通过 ajax 进行选择输入搜索。当我删除然后添加选择时，它停止工作。这是另一个显示效果的小提琴。

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

4

3 回答 3

1

您可以使用委托事件：

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

或者看看detatch

于 2013-06-27T12:15:33.173 回答
0

将您的 keyup 绑定代码更改为此

$(".tab-content").on("keyup", "#mail_address", function() {
        console.log("text changed, new value: " + $(this).val() );
    });
于 2013-06-27T12:19:38.843 回答
0

使用 jQuery 事件委托

演示 -- > http://jsfiddle.net/p3tkL/1/

$('.tab-content').on('keyup', '#mail_address', function(){
      console.log("text changed, new value: " + this.value);
  });
于 2013-06-27T12:18:30.190 回答