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

Why is the keyup event not executed in jquery?

黄舟
Release: 2017-06-27 14:20:04
Original
1870 people have browsed it

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template