0

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

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

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

脚本

$(".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>
4

6 回答 6

3

您需要从<td> jQuery has.unbind() 中取消绑定或分离事件。

JS：

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

小提琴：

http://jsfiddle.net/YGhtm/

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

于 2013-09-11T05:14:12.707 回答
1

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

$(document).on('click', 'input-sm', function(e) {
   e.stopPropagation();
});
于 2013-09-11T05:09:46.047 回答
1

我相信其他人已经提供了适合您的答案。但是，我想指出您在这种情况下应该考虑的事情。

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

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

我个人建议使用不同的类名，例如.editing除了你之外.inputQty，表示它正在编辑中。

更新：我注意到你也使用相同id的，考虑改变它以使用你的name属性。

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

$(".inputqty").click(function(event) {
    $this = $(this);
    if (!$this.hasClass('editing'))
    {
        var currentValue = $this.text();
        var name = $this.attr('name');
        $this.html('<input class="form-control input-sm" id="inputqty" style="width:50px; height:20px;" type="text" name="' + name + '" value="' + currentValue + '">');
        $this.addClass('editing');
    }  
});
于 2013-09-11T05:24:05.133 回答
0

尝试

$(".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; ?>">');
    }
});
于 2013-09-11T05:08:48.437 回答
0

你也可以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.

于 2013-09-11T05:09:43.583 回答
0

上述解决方案适用于显示输入字段，但在 jquery 脚本中使用 php 变量却不能。所以我最终使用的解决方案是这个。

HTML/PHP

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

脚本

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

希望这可以帮助某人:)

于 2013-09-11T05:33:42.483 回答