在以下情况下显示输入字段 <td> 值 </td> 被点击

Question

I have a table with data results displayed.
I want to make the values change to an input field when clicked, so that the new value can be entered and submitted.

I have the following script which works ok at displaying the input field, but once displayed i can't click inside the input field to enter a new value.

How do i prevent the input field from responding to the second click?

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

You would need to unbind or detach the event from the <td> jQuery has .unbind().

JS:

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

Fiddle:

http://jsfiddle.net/YGhtm/

This will prevent a second click - it would remove the entire binding actually.

Answer 2

you can use stopPropagation() to prevent parent handlers from being notified of the event, like

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

Answer 3

I believe others have provided answer that will work for you. I however want to point out things that you should consider in this scenario of yours.

First of, unless necessary DO NOT use <?php ?> in your jquery. This is because PHP is server side, it gets rendered once before sent to your client. Any more interaction with the client is beyond the capabilities of your PHP server side scripting.

In your case, you can just take the current name attribute of your <td> for the name of your <input> and use the current value in your <td> as the value attribute of your <input> .

I personally recommend using different class name such as .editing in addition to your .inputQty to signify that it is in the middle of editing.

UPDATE : I notice you use the same id as well, consider changing that to use your name attribute as well.

From the point above, I recommend the following 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');
    }  
});

Answer 4

Try

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

You can also remove the class like

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

Then the click event will not work for that.It will be the better option that if you maintain an another class ratherthan inputqty and append this event to that new class,and remove,if you want to maintain the inputqty .

Answer 6

The above solutions work at displaying the input field, however using the php variable in the jquery script doesn't. So the solution i ended up using is this.

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();
    });

Hope this helps someone :)