javascript - 在 Firefox 上使用 ajax 和 jQuery 单击时，编辑框文本不会被选中

Question

每当我单击编辑框时，输入字段(文本)都不会保持选中状态，或者不会将焦点重新设置在该输入字段中。

请注意，此编辑框位于表格中，但这在 google chrome 中工作正常，而在 Firefox 中则存在问题。

这是我的代码:

<script>
$(document).ready(function () {
    $('td.edit').click(function () {
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
        $('#editbox').focus();
    });
    $('td.edit').keydown(function (event) {
        arr = $(this).attr('class').split(" ");
        if (event.which == 13) {
            $.ajax({
                type: "POST",
                url: "supplierprice/config.php",
                data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                success: function (data) {
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                }
            });
        }
    });
    $('#editbox').live('blur', function () {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });
}); 


</script>

我的 HTML

<table id="sorting" class="tablesorter" style="width: 100px; table-layout: fixed;" >

<thead>
<tr>
<th>6xxA <span>  <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 17px"></span>
<th>6xxB <span>  <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 21px"></span>
</th>
<th  >10xx <span> <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 32px"></span>
</th>
<th >11xx <span> <img id="logo"  src="/image/Picture2.png" style="margin:-62px -21px -9px 32px"></span>
</th>
</tr>
</thead>

<tbody >
<?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'fms';
$dbPassword = 'xxxx';
$dbDatabase = 'fms';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");



$sql = mysql_query("SELECT * FROM supplierprice");


while($rows=mysql_fetch_array($sql))
{

if($alt == 1)
        {
           echo '<tr class="alt">';
           $alt = 0;
        }
        else
        {
           echo '<tr>';
           $alt = 1;
        }

echo '  <td class="edit region '.$rows["supp_price_id"].'">'.$rows["region"].'</td>
        <td class="edit country '.$rows["supp_price_id"].'">'.$rows["country"].'</td>
        <td class="edit networkname '.$rows["supp_price_id"].'">'.$rows["networkname"].'</td>
            <td class="edit mcc '.$rows["supp_price_id"].'">'.$rows["mcc"].'</td>    
            <td class="edit mnc '.$rows["supp_price_id"].'">'.$rows["mnc"].'</td>
            <td class="edit mnp '.$rows["supp_price_id"].'">'.$rows["mnp"].'</td>


        </tr>';


}

?>


</td>


</tbody>


</table>

Answer 1

$('td.edit').click(function() {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');

        //Id must be unique, assuming only one element with id="editbox" exixts
        $('#editbox').focus();

        //return false
        return false;

    });

注意:请确保 html 结构正确并且 Id (editbox) 是唯一的:)