Question

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

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

Answer 1

您可以使用delegated events：

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

或者查看detatch

Answer 2

使用jQuery事件委托

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

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

Answer 3

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

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

添加/删除现有表单字段而不会丢失事件

3 个答案: