jQuery 输入按钮点击事件监听器 [英] jQuery input button click event listener

问题描述

jQuery 的全新.我试图在我的页面上为以下控件设置事件侦听器，单击该控件时会显示警报:

Brand new to jQuery. I was trying to set up an event listener for the following control on my page which when clicked would display an alert:

<input type="button" id="filter" name="filter" value="Filter" />

但是没有用.

$("#filter").button().click(function(){...});

如何使用 jQuery 为输入按钮控件创建事件监听器?

How do you create an event listener for a input button control with jQuery?

推荐答案

首先，button() 是一个 jQuery ui 函数，用于创建 按钮小部件 与 jQuery 核心无关，它只是设置按钮的样式.
因此，如果您想使用小部件，请添加 jQuery ui 的 javascript 和 CSS 文件，或者删除它，如下所示:

First thing first, button() is a jQuery ui function to create a button widget which has nothing to do with jQuery core, it just styles the button.
So if you want to use the widget add jQuery ui's javascript and CSS files or alternatively remove it, like this:

$("#filter").click(function(){
    alert('clicked!');
});

另一件可能导致您出现问题的事情是，如果您没有等待输入呈现并在输入之前编写代码.jQuery 有 ready 函数，或者它的别名 $(func) 在 DOM 准备好后执行回调.
用法:

Another thing that might have caused you the problem is if you didn't wait for the input to be rendered and wrote the code before the input. jQuery has the ready function, or it's alias $(func) which execute the callback once the DOM is ready.
Usage:

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

所以即使订单是这样的，它也会起作用:

So even if the order is this it will work:

$(function(){
    $("#filter").click(function(){
        alert('clicked!');
    });
});

<input type="button" id="filter" name="filter" value="Filter" />

演示

这篇关于jQuery 输入按钮点击事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！