Javascript 在firefox上使用ajax和jQuery单击时，不会选择编辑框文本

无论何时单击编辑框，输入字段文本都不会保持选中状态，或者不会在该输入字段中重新设置焦点

请注意，这个编辑框在一个表中，但在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>

---

注意：请确保html结构正确且Id editbox唯一：

发布html或更好地对其进行修改。使用on的延迟语法和选择器，附加到文档或正文，而不是使用live.editbox->你发布的HTML没有任何类似的ID。你有一个错误之前，我没有发现你的HTM和JS之间有很多连接，所以我用我的标记和你的JS代码修改了它：。我在FF中测试了它，它工作正常！此外，您不需要结束第一个th，也不需要结束最后一个td。

$('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;

    });