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

Why is the keyup event not executed in jquery?

黄舟
黄舟Original
2017-06-27 14:20:041864browse

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>

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)
        });
    });
})

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));
    });
})

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)
    });
});

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)
    });
});

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)
        });
});


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:
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