jQueryのhtml()で文字列が挿入できない

Question

jQueryのhtml()メソッドを使用し、指定した部分にhtml()の引数を挿入したいと考えています。しかし、実際に以下のコードを記入したところ挿入できていませんでした。

誤っている部分を教えていただけますよう、お願いいたします。

<tr>
                <!--品番・品名-->
                <td>{{Form::text('billing_item[]', $val->billing_item,['class' => 'validate', 'id' => 'billing_item'])}}</td>
                <!--数量-->
                <td><input type="text" name="quantity[]" value="{{$val->quantity}}" class="validate quantity" id="quantity"></td>
                <!--単位-->
                <td>{{Form::text('unit[]', $val->unit,['class' => 'validate', 'id' => 'unit'])}}</td>
                <!--単価-->
                <td><input type="text" name="bill_unit_price[]" value="{{ceil($val->bill_unit_price)}}" class="validate bill_unit_price" id="bill_unit_price"></td>
                <!--金額-->
                <td><span class="ans"></span></td>
                <td><a href="#" data-id="{{$val->id}}" class="waves-effect waves-light btn del">削除</a>
                </td>
                {{Form::hidden('bill_id[]', $val->id)}}
            </tr>

<script>
        $( '.quantity,.bill_unit_price' ).on('keyup',function() {
            var $_t = $( this ).parent();
            var quantityVal = $_t.find( '.quantity' );
            var  num01 = quantityVal.val();
            var bill_unitVal = $_t.find( '.bill_unit_price' );
            var num02 = bill_unitVal.val();
            var sum = num01 * num02;
            $('.ans').html(sum);
        } );
    </script>

また同様にブラウザからソースコードを確認したところ、やはり 「<td><span class=”ans”></span></td>」の部分には何も挿入されておりませんでした。

developer toolも確認しましたがエラーは確認できませんでした。

上記の問題に対して私が行ったのは以下の手法です。

(a)挿入したい<span>タグをclass名ではなくid属性に設定。
変更点→ <td><span class=”ans”></span></td>
変更点→ $(‘#ans’).html(sum);

(b)html()メソッドではなく、text()メソッドを使用する
変化なし

(b)htmlメソッドの引数に直線、変数同士の掛け算を挿入
変更点→ $(‘.ans’).html(num01 * num02);

いずれもエラーは生じず、ただ<td><span>タグ内に表示されないという結果となりました。

ちなみに、num01 * num02という計算自体はデータ上行われているため、
「$(‘.ans’).html(sum);」より上の部分については間違っておらず、

$(‘.ans’).html(sum);の部分、もしくは<td><span class=”ans”></span></td>の部分に誤りがあるのではないか、と考えています。

参考にしたサイト
https://ameblo.jp/linking/entry-10046762170.html
https://teratail.com/questions/127796

Answer 1

.quantity の親から見た子孫には .bill_unit_price がなく、
.bill_unit_price の親から見た子孫にも .quantity がないので必ずどちらかが存在しない状態となっています。
$_t が何を指しているのか考えてみてください。

            //var $_t = $( this ).parent();
            var $_t = $( this ).closest('tr');

https://api.jquery.com/closest/

Answer 2

find()はその要素以下の要素すべてを探して取得します。その関係で、戻り値は配列になっています。
ですので、val()で値をとってくる場合は配列の添え字を付けてあげる必要があります。

// bill_unitValは、見つかったのが1つだとしても配列としてセットされる
var bill_unitVal = $_t.find( '.bill_unit_price' );

// 配列の1つ目の値だけをとりたい場合は
var num02 = bill_unitVal[0].val();

// ただし、そもそもうまく取得できていない可能性もあるので、配列要素が存在するかで値をセットした方が無難
var num02 = bill_unitVal[0] ? bill_unitVal[0].val() : 0;

quantityも同様です。値が正しく変数にセットされていないので計算も失敗してるという状態です。

Answer 3

まずは、どこまで実行できているか確認してみましょう。keyupイベント自体が発生していないかもしれません。

Comments

[HirakuMorishima]

コメントありがとうございます。以下のように「alert($('.ans').html(sum));」とくくったところ、
keyupでalertが出てきましたので、keyupイベント自体は発生しているかと思います。

$(".quantity,.bill_unit_price").on('keyup',function() {
var $_t = $( this ).parent();
var quantityVal = $_t.find( '.quantity' );
var num01 = quantityVal.val();
var bill_unitVal = $_t.find( '.bill_unit_price' );
var num02 = bill_unitVal.val();
var sum = num01 * num02;
alert($('.ans').html(sum));
});

[HirakuMorishima]

また、alertの部分を「 alert(sum);」に変えてみたところ、「NaN」と出てきてしまいました。
そもそも計算が上手くいっていないのかもしれませんが、それにしても<span>に「NaN」すら出ないことが噛み砕けません。。