如何检测jquery事件内部的更改

Question

我有一个包含行的html表
每一行都有一个带按钮的操作列，当按下这个按钮时，我想在第二个td中显示一个输入字段，用户必须填写并提交，然后事件/单击完成，否则输入应该再次消失。

<table>
     <thead>
          <tr>
              <th>ID</th>
              <th>user-Input</th>
              <th>data3</th>
              <th>data4</th>
              <th>data5</th>
              <th>Action</th>
          </tr>
    </thead>
    <tbody id="customers">
          <tr>
              <td>1</td><td></td><td>data</td><td>data</td><td>data</td><td><button type='button' class='acceptCustomerBut'>GO</button></td>
          </tr>
    </tbody>
</table>

javascript/jquery

$(document).on("click", ".acceptCustomerBut", function(e) {
    e.preventDefault();
    $(this).parent().parent().find("td:nth-child(2)").html("<input type='number' name='customer_id'>");
    // DO SOMETHING
});

我在想是否可以让函数检测输入是否已经接收到jquery的值。如果没有，隐藏输入字段？

Answer 1

试试这个，

$(document).on("click", ".acceptCustomerBut", function(e) {
    e.preventDefault();
    var $td=$(this).closest('tr').find("td:eq(1)");
    if($td.find('input').length){ // check input length, if exists then hide it
        $td.find('input').hide();
    } else { // else add it
        $td.html("<input type='number' name='customer_id'>");
    }
});

实时演示