Question

所以我的代码中有一些奇怪的行为，我不知道为什么。

我正在使用uniformjs，例如复选框是这样的：

<label>Check Boxes</label>
    <div class="input_group">
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 1" type="checkbox"></span></div>First option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 2" type="checkbox"></span></div>Second option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 3" type="checkbox"></span></div>Third option
    </div>

因此，当选中检查选项时，父范围会添加“已检查”类。

所以我试图开发一个系统，用户可以在其中添加用户并在为该用户创建新地址或使用公司地址之间进行选择。

两个地址都加载到不同的div中，公司一个被隐藏，这就是我所做的功能：

$('input[name="company_addr"]').change(function(){
            var checked = $(this).is(':checked');
            $('input[name="company_addr"]').each(function(){
                $(this).attr('checked',checked);
                if (checked)
                    $(this).parent().addClass('checked');
                else
                    $(this).parent().removeClass('checked');
            });
            if (checked){
                newAddrContent = block_new.html();
                block_new.html(block_company.html());
            }
            else{
                block_new.html(newAddrContent);
            }
        });

如果我删除了最后一个if ... else并取消隐藏公司地址，我会看到这两个检查是如何变化的，这样该部分可以完美运行。

然而，block_new中的复选框不再起作用，但是block_company的复选框不起作用。如果我点击公司（应该隐藏），另一个不会取消选中或检查，但内容已被正确替换。

可能会发生什么？

Answer 1

你使用check（）这是一次性功能。您必须使用.live（事件，函数）绑定一个live事件，以便处理程序处理未来的元素。

所以简单而不是：

$(elements).change();

使用

$(elements).live('change', function() {
...
});

Answer 2

问题是当你动态创建一个新的input时，change事件没有被反弹。您可以使用.delegate Docs

解决此问题

$('.input_group').delegate('input[name="company_addr"]', 'change', function(){
             //do your stuff
});

Reasons to use delegate over live

Answer 3

最后似乎是uniformjs在这里评论的一个错误：github.com/pixelmatrix/uniform/issues/180

如果有人对我如何设法解决这个问题感兴趣，我只是改变了显示方法，隐藏了正确的div，因此，在提交表单时，我会检查哪个div被隐藏，并考虑到这一点处理表单。< / p>

复选框在替换内容中不起作用

3 个答案: