Home Web Front-end JS Tutorial Why is the keyup event not executed in jquery?

Why is the keyup event not executed in jquery?

Jun 27, 2017 pm 02:20 PM
jquery keyup Why

I want to achieve
1. After clicking the #skillKey tr element, the code color changes,
2. Then change the text of the current element after inputting through the keyboard, for the convenience of Debugging Let’s talk about step 2 Omit it to alert(123)
HTML code code is as follows:

<table id="skillKey">
<tbody>
<tr>Q</tr>
</tbody>
<table>
Copy after login

JQueryCode is as follows:

$(function () {

    $(&#39;#skillKey&#39;).on(&#39;click&#39;, &#39;tr&#39;, function () {
        $(this).css(&#39;color&#39;,&#39;red&#39;);
        $(this).keyup(function(){
        alert(123)
        });
    });
})
Copy after login

Why does the element change color after clicking, but input through the keyboard cannot alert? The effect can indeed be achieved through $(document).keyup(). I would like to know the reason. Maybe it has something to do with the type of element that keyup() requires to be bound?

Another: A wrong keyup()functioncalling method, if written like this:

$(function () {

    $(&#39;#skillKey&#39;).on(&#39;click&#39;, &#39;tr&#39;, function () {
        $(this).css(&#39;color&#39;,&#39;red&#39;);
        $(this).keyup(alert(123));
    });
})
Copy after login

Then after clicking tr, the element changes color and a window 123 will pop up. This Why?

First point out one of your mistakes

$(&#39;#skillKey&#39;).on(&#39;click&#39;, &#39;tr&#39;, function () {
    $(this).css(&#39;color&#39;,&#39;red&#39;);
    $(this).keyup(function(){
    alert(123)
    });
});
Copy after login

You bind event like this. The result is that tr is bound once when you click it, and it is bound as many times as you click it. This example is still not obvious. You place an input in tr, and then write the following code to see the effect.

$(&#39;#skillKey&#39;).on(&#39;click&#39;, &#39;input&#39;, function () {
    $(this).css(&#39;color&#39;,&#39;red&#39;);
    $(this).blur(function(){
        alert(123)
    });
});
Copy after login

Give me some suggestions

You can first use the elements that need to be usedCache, don’t abuse $, you can use chaining if it is easy to read

$(&#39;#skillKey&#39;).on(&#39;click&#39;, &#39;tr&#39;, function () {    var $this = $(this);
    $this
        .css(&#39;color&#39;, &#39;red&#39;)
        .keyup(function () {
            alert(123)
        });
});
Copy after login


The above is the detailed content of Why is the keyup event not executed in jquery?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to display child categories on archive page of parent categories How to display child categories on archive page of parent categories Apr 19, 2025 pm 11:54 PM

Do you want to know how to display child categories on the parent category archive page? When you customize a classification archive page, you may need to do this to make it more useful to your visitors. In this article, we will show you how to easily display child categories on the parent category archive page. Why do subcategories appear on parent category archive page? By displaying all child categories on the parent category archive page, you can make them less generic and more useful to visitors. For example, if you run a WordPress blog about books and have a taxonomy called "Theme", you can add sub-taxonomy such as "novel", "non-fiction" so that your readers can

Navicat's method to view MongoDB database password Navicat's method to view MongoDB database password Apr 08, 2025 pm 09:39 PM

It is impossible to view MongoDB password directly through Navicat because it is stored as hash values. How to retrieve lost passwords: 1. Reset passwords; 2. Check configuration files (may contain hash values); 3. Check codes (may hardcode passwords).

How to install mysql in centos7 How to install mysql in centos7 Apr 14, 2025 pm 08:30 PM

The key to installing MySQL elegantly is to add the official MySQL repository. The specific steps are as follows: Download the MySQL official GPG key to prevent phishing attacks. Add MySQL repository file: rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm Update yum repository cache: yum update installation MySQL: yum install mysql-server startup MySQL service: systemctl start mysqld set up booting

How to recover data after SQL deletes rows How to recover data after SQL deletes rows Apr 09, 2025 pm 12:21 PM

Recovering deleted rows directly from the database is usually impossible unless there is a backup or transaction rollback mechanism. Key point: Transaction rollback: Execute ROLLBACK before the transaction is committed to recover data. Backup: Regular backup of the database can be used to quickly restore data. Database snapshot: You can create a read-only copy of the database and restore the data after the data is deleted accidentally. Use DELETE statement with caution: Check the conditions carefully to avoid accidentally deleting data. Use the WHERE clause: explicitly specify the data to be deleted. Use the test environment: Test before performing a DELETE operation.

Centos stops maintenance 2024 Centos stops maintenance 2024 Apr 14, 2025 pm 08:39 PM

CentOS will be shut down in 2024 because its upstream distribution, RHEL 8, has been shut down. This shutdown will affect the CentOS 8 system, preventing it from continuing to receive updates. Users should plan for migration, and recommended options include CentOS Stream, AlmaLinux, and Rocky Linux to keep the system safe and stable.

How to write oracle database statements How to write oracle database statements Apr 11, 2025 pm 02:42 PM

The core of Oracle SQL statements is SELECT, INSERT, UPDATE and DELETE, as well as the flexible application of various clauses. It is crucial to understand the execution mechanism behind the statement, such as index optimization. Advanced usages include subqueries, connection queries, analysis functions, and PL/SQL. Common errors include syntax errors, performance issues, and data consistency issues. Performance optimization best practices involve using appropriate indexes, avoiding SELECT *, optimizing WHERE clauses, and using bound variables. Mastering Oracle SQL requires practice, including code writing, debugging, thinking and understanding the underlying mechanisms.

Navicat Connection Timeout: How to Resolve Navicat Connection Timeout: How to Resolve Apr 08, 2025 pm 11:03 PM

Reasons for Navicat connection timeout: network instability, busy database, firewall blocking, server configuration problems, and improper Navicat settings. Solution steps: Check network connection, database status, firewall settings, adjust server configuration, check Navicat settings, restart the software and server, and contact the administrator for help.

Navicat's method to view PostgreSQL database password Navicat's method to view PostgreSQL database password Apr 08, 2025 pm 09:57 PM

It is impossible to view PostgreSQL passwords directly from Navicat, because Navicat stores passwords encrypted for security reasons. To confirm the password, try to connect to the database; to modify the password, please use the graphical interface of psql or Navicat; for other purposes, you need to configure connection parameters in the code to avoid hard-coded passwords. To enhance security, it is recommended to use strong passwords, periodic modifications and enable multi-factor authentication.

See all articles