javascript - 单击 <td>Value</td> 时显示输入字段

Question

我有一个显示数据结果的表格。
我想在单击时将值更改为输入字段，以便可以输入并提交新值。

我有以下脚本，可以正常显示输入字段，但显示后我无法在输入字段内单击以输入新值。

如何防止输入字段响应第二次点击？

脚本

$(".inputqty").click(function(event) {
            $(this).html('<input class="form-control input-sm" id="inputqty" style="width:50px; height:20px;" type="text" name="<?php echo $prod_var_code; ?>" value="<?php echo $qty; ?>">');
    });

呈现的 HTML

<td class="inputqty" name="product1">5</td>
<td class="inputqty" name="product2">2</td>
<td class="inputqty" name="product3">8</td>

Answer 1

您需要将事件与 <td> 解除绑定(bind)或分离。 jQuery 有 .unbind()。

JS:

$(".inputqty").click(function (event) {
    $(this).html('Whatever HTML I want');
    $(this).unbind('click');
});

fiddle :

http://jsfiddle.net/YGhtm/

这将防止第二次点击 - 它实际上会删除整个绑定(bind)。