Question

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

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

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

SCRIPT

$(".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; ?>">');
    });

RENDERED 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>取消绑定或分离事件 jQuery有.unbind（）。

JS：

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

小提琴：

http://jsfiddle.net/YGhtm/

这样可以防止第二次点击 - 它会实际删除整个绑定。

Answer 2

您可以使用stopPropagation()来阻止父处理程序收到有关该事件的通知，例如

$(document).on('click', 'input-sm', function(e) {
   e.stopPropagation();
});

Answer 3

我相信其他人已经提供了适合您的答案。但是，我想指出在你的场景中你应该考虑的事情。

首先，除非必要不要在你的jquery中使用<?php ?>。这是因为PHP是服务器端，它在发送到您的客户端之前呈现一次。与客户端的任何更多交互都超出了PHP服务器端脚本的功能。

在您的情况下，您可以将name的当前<td>属性作为<input>的名称，并使用<td>中的当前值作为value的{{1}}属性。

除了<input>之外，我个人建议使用.editing之类的其他类名来表示它正处于编辑过程中。

更新：我注意到您也使用相同的.inputQty，请考虑将其更改为使用id属性。

从上面的观点来看，我推荐以下jsfiddle：http://jsfiddle.net/VnnXq/

name

Answer 4

尝试

$(".inputqty").click(function (event) {
    var $this = $(this);
    if (!$this.has('input')) {
        $(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; ?>">');
    }
});

Answer 5

你也可以remove类

$(".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; ?>">');
        $(this).removeClass('inputqty');
});

然后click event将不起作用。如果您维护另一个类inputqty并将此事件附加到该新类，并且如果您想要删除，那将是更好的选择保持inputqty。

Answer 6

上述解决方案在显示输入字段时起作用，但是在jquery脚本中使用php变量却没有。所以我最终使用的解决方案就是这个。

HTML / PHP

echo '<td>
      <p class="valueqty">' . $qty . '</p>
      <input style="display:none" type="text" name="' . $prod_var_code . '" value="' . $qty . '">
      </td>';

SCRIPT

$(".valueqty").click(function(event) {
            $(this).hide();
            $(this).next().show();
    });

希望这有助于某人：）

单击“值”时显示输入字段

6 个答案: