Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

jqueryイベント付与の順番

More than 5 years have passed since last update.

DOMの読み込みとイベント付与の順番について

以前、とあるテキストボックスにblurイベントを付与しようとした際、動かなくて
ハマったので。

$(function(){
    $('#hogehoge').blur(function(){
        if($('#txthoge').val() == ''){
            alert('空欄です');
            return;
        };
    });
});

みたいな物を入れていたのですが
肝心なtxthogeのフォーカスアウトで動かないと…

実はこのtxthogeというテキストボックスは
とある処理の後に作成したものなんですね。

function CreatHoge(){
    var Html = '';
    Html = '< input type = "text" id = "txthoge" >'
    $('#btnhoge').append(Html)
};

っで肝心のblurの処理自体はload時に読み込んでいるのですが
この段階でtxthogeが存在してないのでイベント付与出来なかったんですよね。

この場合、txthogeを入れた後にblur処理を入れると解決します。

function CreatHoge(){
//txthoge追加
    var Html = '';
    Html = '< input type = "text" id = "txthoge" >'
    $('#btnhoge').append(Html)

\\blur処理
    $('#hogehoge').blur(function(){
        if($('#txthoge').val() == ''){
            alert('空欄です');
            return;
        };
    });
};

こうしてやるとtxthogeのDOMが生成された後に
イベント付与という流れなので動きます。

新人プログラマーからでした。

tako1993
最近は仕事の都合でbashコマンド多い 基本はBFF→frontend周りが好きで興味関心がある。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away