javascript - 2 つのクラス名を持つセレクターで .blur() イベントが発生しない

Question

ここのサンプルデモ.drow1 .subvalでは、クラスがフォーカスを失っ たときにイベントを発生させたいと思っています。

JS:

$(".drow1 .sub_val").on('blur',funtion(){
alert("hello");
});

HTML:

<table border="1">
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Type</th>
    </tr>
    <tr>
        <td> one</td>
        <td>
            <input type="text" value="600" class="sub_val" />
        </td>
        <td>dummy text</td>
    </tr>

    <tr class="drow1">
        <td> Two</td>
        <td>
            <input type="text" value="50" class="sub_val" />
        </td>
        <td>drow1</td>
    </tr>

    <tr class="drow1">
        <td> Three</td>
        <td>
            <input type="text" value="30" class="sub_val" />
        </td>
        <td>drow1</td>
    </tr>
     <tr class="drow2">
        <td> Four</td>
        <td>
            <input type="text" value="30" class="sub_val" />
        </td>
        <td>drow 2</td>
    </tr>
</table>

編集：クラスを持つテーブル行が.drow1動的に作成されるため、発火しません

Answer 1

コードにタイプミスがあります。次のようにfuntionする必要がありますfunction。

$(".drow1 .sub_val").on('blur',function(){
   alert("hello");
});

編集:要素を動的に作成している場合は、イベントを委任する必要があります。

$("table").on("blur", ".sub_val", function() {
    alert("hello");
});