为什么用jQuery组件调用函数会重新加载xhtml页面

Why does a function call with jQuery components reload the xhtml page?

本文关键字：加载 页面 xhtml 新加载 jQuery 组件 调用 函数 为什么      更新时间：2023-09-26

我正在使用JSF、Primefaces和Bootsfaces。我正在开发一个导航栏，我必须在导航栏中创建一个下拉菜单，但我在实现b:dropmenu时遇到了问题，我使用了另一个解决方案。

我的问题是，当我点击Nombre de usuario时，如果我调用mostrarOpcionesUsuario()，页面会重新加载，但如果我将mostrarOpcionesUsuario();替换为alert('hello!');，系统会显示alert，并且不会刷新页面。我需要在不刷新页面的情况下调用mostrarOpcionesUsuario()。

这是我的代码：

XHTML：

<b:navbar>
    <b:navbarLinks>
        <b:navLink onmousedown= "mostrarOpcionesUsuario(); return false;">
        <div>
            <ul>
                <li>
                    <div>
                        <span>
                            Nombre de usuario
                        </span>
                    </div>
                    <ul class = "ulOpciones">
                        <li>Web Design</li>
                        <li>Web Development</li>
                        <li>Illustrations</li>
                    </ul>
                </li>
            </ul>
        </div>
        </b:navLink>
    </b:navbarLinks>
</b:navBar>

JavaScript:

function mostrarOpcionesUsuario() {
    $(".ulOpciones").css('visibility', function (i, v) {
        if (v == 'hidden') {
            $(".ulOpciones").css({'visibility': 'visible'});
        } else {
            $(".ulOpciones").css({'visibility': 'hidden'});
        }
    });
}

如果我把alert放在mostrarOpcionesUsuario()中，页面不会重新加载，但使用以前的mostrarOpcionesUsuario实现，页面会重新加载。

请帮帮我！

谢谢！

我找到了解决方案：

<b:navLink href="javascript:mostrarOpcionesUsuario()">

好吧，您自己已经回答了您的问题：BootsFaces <b:navLink>有几个不同的选项来定义单击时会发生什么。其中之一是href属性，该属性反过来允许您通过简单地在javascript:之前调用JavaScript。

另一个可能更直观的解决方案是使用onclick处理程序而不是onmousedown处理程序。这也起到了作用：

<b:navLink onclick="mostrarOpcionesUsuario(); return false;">
相关文章：