Question

我折叠了一些div并让用户展开它们并选择收音机/复选框。我有这个代码和一个简单的jquery脚本。麻烦是单选按钮检查的行为被其父div的onclick处理程序破坏。有什么想法我怎么解决它？

    <div class="tree">
        <div class="parent">Item
           <div class="parent">ParentItem
              <div>
                 <input type="radio" name="_gen" value="a"></input>LeafItem a
              </div>
              <div>
                 <input type="radio" name="_gen" value="b"></input>LeafItem b
              </div>
         </div>
        </div>
     </div>
     <script type="text/javascript">
                $(function() {
                $('div.tree div:has(div)').addClass('parent'); 
                $('div.tree div').click(function() {
                    var o = $(this);
                    o.children('div').toggle();
                    o.children($(':radio')).attr('checked', true);
                    o.filter('.parent').toggleClass('expanded');
                    return false;
                    });
                });
            </script>

Answer 1

不确定你在这里尝试做什么，但停止输入上的传播将解决点击更高元素的问题：

$(function() {
    $('div.tree div:has(div)').addClass('parent');
    $('div.tree div').click(function() {
        var o = $(this);
        o.children('div').toggle();
        o.children($(':radio')).attr('checked', true);
        o.filter('.parent').toggleClass('expanded');
        return false;
    });
    $('input[type="radio"]').on('click', function(e) {
        e.stopPropagation();
    });
});

FIDDLE

此外，输入标签是自动关闭的，不需要关闭吗？

Answer 2

根据我的说法，这更好：

$('div.tree div:has(div)').addClass('parent');
$('div.tree div').click(function( e ) {
    if ( !$(e.target).hasClass("parent") ) {
        return;
    }
    var o = $(this);
    o.children('div').toggle();
    o.children($(':radio')).attr('checked', true);
    o.filter('.parent').toggleClass('expanded');
    return false;
});

这样您只需要创建一个事件，然后检查该事件中的目标，看看它是否有一个名为.parent的类。

div onclick打破了儿童无线电检查的行为

2 个答案: