Question

我使用bootstrap和jquery创建了一个多步骤表单。

当我点击某个按钮转到下一步时，它会在控制台上显示此错误：

tab.js:155 Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at t.a._activate (tab.js:155) (if (container.nodeName === 'UL')
    at t.a.show (tab.js:120)
    at HTMLButtonElement.<anonymous> (tab.js:249)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.t._jQueryInterface [as tab] (tab.js:236)
    at HTMLButtonElement.<anonymous> (tab.js:266)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)
a._activate @ tab.js:155
a.show @ tab.js:120
(anonymous) @ tab.js:249
each @ jquery.min.js:2
each @ jquery.min.js:2
t._jQueryInterface @ tab.js:236
(anonymous) @ tab.js:266
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

您知道如何解决此错误吗？

导航按钮的JS代码：

<script type="text/javascript">

    $(function(){
        $('a.nav-link').on('show.bs.tab', function (e) {
            var $target = $(e.target);
            if ($target.parent().hasClass('disabled')) {
                return false;
            }
        });

        $(".next-step").click(function (e) {
            var $active = $('.nav-pills li a.active');
            $active.parent().next().removeClass('disabled');
            nextTab($active);
        });

        $(".prev-step").click(function (e) {
            var $active = $('.nav-pills li a.active');
            prevTab($active);
        });

        function nextTab(elem) {
            $(elem).parent().next().find('a.nav-link').click();
        }
        function prevTab(elem) {
            $(elem).parent().prev().find('a.nav-link').click();
        }
    });


</script>

Answer 1

几分钟前遇到了问题，并且意识到我的标记稍有改动就解决了这个问题。

使用ul> li>标记结构
确保您的父UL拥有类“ nav”，显然引导4中的所有Nav项目都必须具有.nav类https://github.com/twbs/bootstrap/issues/23594

tab.js：155 Uncaught TypeError：无法读取未定义的属性“nodeName”

1 个答案: