如何使 onclick function 与 jquery 一起工作？

Question

我是 Js 新手，我对 onclick function 有一些问题。 我在 HTML 上添加了一个按钮，然后我想在单击该按钮后弹出一个 window ，但我无法在 js 端正确显示它。

以下是代码：

HTML

<button class="boton1" onclick="mostrarMensaje()">
       <span class="popuptext1" id="myPopup1">Conector PS/2</span>
       <img src="./images/boton2.png" class="img1">
</button>

JS

$("#boton1").on("click", mostrarMensaje());

function mostrarMensaje() {
    $("#popuptext1").trigger("show");
}

Answer 1

从 HTML 中删除onclick属性（请参阅为什么内联事件处理程序属性在现代语义 HTML 中是一个坏主意？ ）并将您的 JS 代码更改为：

$("#boton1").on("click", mostrarMensaje);

您当前的代码调用 function mostrarMensaje并将返回值传递给.on ，此时您只需将处理程序 function 作为参数传递给.on 。

我不会重复 Shree 所说的话，请参阅他们对其他问题的解释的答案。

完整代码：

 $(".boton1").on("click", mostrarMensaje); function mostrarMensaje() { $(".popuptext1").show(); }

 .popuptext1 { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="boton1"> <span class="popuptext1" id="myPopup1">Conector PS/2</span> <img src="./images/boton2.png" class="img1"> </button>

Answer 2

您已经在 HTML <button class="boton1" onclick="mostrarMensaje()">上调用了mostrarMensaje() function，因此无需从 ZF590B4FDA2C30BE27777C8C3CAFCAF5 调用它。 加载时隐藏按钮文本。而不是trigger() ，使用show()在按钮单击时显示文本。

 function mostrarMensaje() { $(".popuptext1").show(); }

 .popuptext1 { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="boton1" onclick="mostrarMensaje()"> <span class="popuptext1" id="myPopup1">Conector PS/2</span> <img src="./images/boton2.png" class="img1"> </button>

注意：您使用#表示 class。 使用. 使用 class 时。