我遇到一个事件处理程序的问题，该事件处理程序用于使用tab键放置一个表格，在其中放入一个输入cel或一个选择框来编辑MySQL中的数据
该方法由事件处理程序捕获，按下的键被验证，如果是TAB，它将继续进行数据验证（如果有效），它到达数据库以上搜索下一个有效单元格以插入输入或选择框。
问题是代码在Firefox中不起作用。当行结束并且必须插入选择框时，事件处理程序似乎松开了事件，并且下一个聚焦元素跳转到下一个丢失事件处理函数的元素。
使用firebug进行测试我发现当触发事件的元素被文本值替换时，代码在keyhandler函数内部中断。更多的补充是，应该动态插入的ajax元素（一个选择列表）会在屏幕上显示片刻，然后消失。然后我尝试使用removeChild方法删除元素，然后使用innerHTML插入，但仍然无效。
The table code
<p style='text-align:center'>
<legend><strong>PRODUTOS</strong></legend></p>
<table class='resultados' id='produtos'>
<tr><th style='display:none'>Código</th>
<th style='text-align:right'>Grupo</th>
<th style='text-align:center'>Marca</th>
<th>Descrição</th>
<th style='text-align:right'>Preço sugerido</th>
<th><img src='../../../imagens/detalhes/detalhes.png' /></th>
<th><img src='../../../imagens/img.png' /></th>
<th><img src='../../../imagens/apaga/apaga.png' /></th>
</tr>
<tr class='alt'>
<td style='display:none' id='codproduto1' title='codproduto'>79</td>
<td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo1' onclick='adlg(this);' >ATUALIZAÇÕES</td>
<td style='text-align:center' title='Marca' name='marca' id='marca1' onclick='adinp(this);' > MARCA</td>
<td title='Descrição' name='descproduto' id='descproduto1' onclick='adinp(this);' >PRODUTO</td>
<td style='text-align:right' title='Preço sugerido' name='precos' id='precos1' onclick='adinp(this);' >12,00</td>
<td style='text-align:center' title='Detalhes Produto' id='detfila1' ><input type='image' src='../../../imagens/detalhes/detalhes.png' onclick='exdetp(this);' /></td>
<td style='text-align:center' title='Imagem Produto' id='imgfila1' ><input type='image' src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>
<td style='text-align:center' title='Apagar Fila' id='apfila1' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
</tr>
<tr class=''>
<td style='display:none' id='codproduto2' title='codproduto'>81</td>
<td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo2' onclick='adlg(this);' >ATUALIZAÇÕES</td>
<td style='text-align:center' title='Marca' name='marca' id='marca2' onclick='adinp(this);' >MARCA</td>
<td title='Descrição' name='descproduto' id='descproduto2' onclick='adinp(this);' >PRODUTO2</td>
<td style='text-align:right' title='Preço sugerido' name='precos' id='precos2' onclick='adinp(this);' >54,00</td>
<td style='text-align:center' title='Detalhes Produto' id='detfila2' ><input type='image' src='../../../imagens/detalhes/detalhes.png' onclick='exdetp(this);' /></td>
<td style='text-align:center' title='Imagem Produto' id='imgfila2' ><input type='image' src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>
<td style='text-align:center' title='Apagar Fila' id='apfila2' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
</tr>
<tr class='alt'>
<td style='display:none' id='codproduto3' title='codproduto'>80</td>
<td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo3' onclick='adlg(this);' >NOVO GRUPO 4</td>
<td style='text-align:center' title='Marca' name='marca' id='marca3' onclick='adinp(this);' >MARCA</td>
<td title='Descrição' name='descproduto' id='descproduto3' onclick='adinp(this);' >PRODUTO3</td>
<td style='text-align:right' title='Preço sugerido' name='precos' id='precos3' onclick='adinp(this);' >23,40</td>
<td style='text-align:center' title='Detalhes Produto' id='detfila3' ><input type='image' src='../../../imagens/detalhes/detalhes.png' onclick='exdetp(this);' /></td>
<td style='text-align:center' title='Imagem Produto' id='imgfila3' ><input type='image' src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>
<td style='text-align:center' title='Apagar Fila' id='apfila3' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
</tr>
</table>
The Javascript functions
/*ADD THE SELECT BOX OF GROUPS*/
function adlg (cell){
ValueCell = cell.innerHTML;//Value from the cell
var aPag = 'include/php/produtos/combo/combogrupo.php';
var fat="&dados="+ValueCell;
ajax(aPag,fat,false);
if (oPed.readyState==4 && oPed.status==200){
document.getElementById(cell.id).innerHTML=oPed.responseText;
var myInput = document.getElementById("cel");/*Select box of the product groups*/
myInput.focus();
adescuta('keydown','onkeydown',segtp,myInput);/* Adds the listen event */
}
}
/*ADDS THE LISTEN EVENT TO THE INPUT OR COMBO BOX------*/
function adescuta(evento1, evento2, keyhand, myInput){
/*events, function Input*/
if(myInput.addEventListener )myInput.addEventListener(evento1,keyhand ,true);
else if(myInput.attachEvent ) myInput.attachEvent(evento2,keyhand);
}
/*------KEY HANDLER FOR PRODUCTS TABLE*/
function segtp(e) {
var TABKEY = 9;
var ESCKEY = 27;
var ENTERKEY = 13;
var pad;
if(e.keyCode == TABKEY || e.keyCode==ENTERKEY) {
stope(e);//Deter o evento por defeito
var input= document.getElementById('cel');
var cel= pegceldoi(input);
var attonblur=input.getAttribute('onblur');
var getnode=input.onblur='';
if(ValueCell!=input.value){
err=atbdp(input);//update in database
if (err!=true){
alert (err);
input.focus();
input.setAttribute('onblur',attonblur);
return false;
}else{
pad=/precos.+/;//
if (pad.test(cel.id))input.value=number_format(numjs(input.value),2,',','.');
cel.innerHTML=input.value.toUpperCase();
}
}else cel.innerHTML=ValueCell;
if (e.keyCode== TABKEY){
cel = percorretabela(cel,'produtos');/*look for valid cel*/
pad=/descgrupo.+/;
if(pad.test(cel.id)) adlg(cel);/*Add a select box*/
else adinp(cel);// /*Add an input box*/
}
}
}
/*UPDATE */
function atbdp(input){
var padsf= new Array(/codproduto.+/,/marca.+/,/descproduto.+/,/descgrupo.+/,/precos.+/);//Padrões da fila
var dadoscel=input.value;//Data
var cel=pegceldoi(input);//Cell
pad=/marca.+/;//Pattern exclude
if(!pad.test(cel.id)&& vazio(dadoscel)==false) return 'Por favor preencha os dados do registro';//If input not filled
var aPag = 'include/php/produtos/atualiza/atprodutos.php';
var produto= pegvf(input,padsf,'produtos');/*patterns of the row*/ fat="&codproduto="+produto[0]+"&marca="+produto[1]+"&descproduto="+produto[2]+"&descgrupo="+produto[3]+"&precos="+numjs(produto[4]);
ajax(aPag,fat,false);
if (oPed.readyState==4 && oPed.status==200){
if(oPed.responseText!='') return oPed.responseText;
else return true;
}
}
/*---------------AJAX*/
function ajax(aPag,dados,bool){
var oRand = parseInt (Math.random()*99999999999999);
var fNovo="rand="+oRand+dados
var oURL = aPag;
oPed= getXMLHTTPRequest ();
oPed.open ("POST", oURL, bool);
oPed.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Setando Content-type
oPed.setRequestHeader("Content-length", fNovo.length);
oPed.send(fNovo);
}
/*ADD INPUT TO THE TABLE */
function adinp (cell){/*Cell that called the function*/
var id = cell.id;//Identficador da célula clikada
ValueCell = cell.innerHTML;/*Value from the cell*/
var valin="value='"+ValueCell+"'";
var longInput='', size='';//Tamanho máximo e tamanho do input
var pad=/marca.+/;//Padrão de ndetificação da célula da marca
if (pad.test(id)){
longInput="maxlength='15'";
size="size='13'";
}else{
pad=/descproduto.+/;
if (pad.test(id)){
longInput="maxlength='145'";
size="size='45'";
}else{
longInput="maxlength='14'";
size="size='14'";
valin="value='"+numsim(ValueCell)+"'";
}
}
cell.innerHTML = "<form name='produtos' style='margin:0; padding:0; padding-left:0; margin-left:0; position:relative'"
+" onsubmit=' return false;'><input style='margin-left:2px; padding-left:2px' id='cel'"
+" onblur='atpb(this);'"//Update on blur
+" onclick='event.cancelBubble=true;'"
+" type='text' "
+valin+" "
+longInput+" "+size+" /><div class='campoexiste' id='existe'></div></form>";
document.getElementById('cel').focus();
var myInput = document.getElementById("cel");
adescuta('keydown','onkeydown',segtp,myInput); }
/*----------------STOP EVENT----------------------------*/
function stope(e){//Deter o evento por defeito
if(e.preventDefault) e.preventDefault();
else{
e.stop();
e.returnValue = false;
e.stopPropagation();
}
}
/*--------GET VALUES FROM ROW*/
function pegvf(input,padsfila,nomtab){//Input, array com os padrões da fila, nome da tabela
var vfila=new Array;//Valores da fila
var cel=pegceldoi(input);//Célula que contém o input
var idfila=cel.parentNode.rowIndex;//Índice da fila da célula
var x;//Contador do array contador de colunas
for (x in padsfila){
if (padsfila[x].test(cel.id))vfila.push(input.value);
else vfila.push(pegvalcel(padsfila[x],idfila,nomtab));
}
return vfila
}
ARCHIVO PHP
Combogrupos.php
<?
/*-----------------SELECT BOX OF----GROUPS*/
$dados = addslashes(trim(utf8_decode($_POST['dados'])));//Nome do grupo que estava na célula
$stl="style='margin-left:2px;padding-left:2px'";//Estilo da lista
$atob="onblur='atpb(this);'";//Função atualiza on blur
$occb="onclick='event.cancelBubble=true;'";//Cancela eventos bubble do evento click
$lig="<select id='cel' $stl $atob $occb >";//Lista grupos
$link=mysql_connect('localhost', '','');
$db = mysql_select_db("fbinfo",$link);
$query="SELECT * FROM gruposproduto";
$res = mysql_query($query,$link);
echo mysql_error();
$num=mysql_num_rows($res);
$sel;//Opção selecionada
if ($num>0){
$lig.="<option value='null'>Seleccione um grupo</option>";
while ($fila = mysql_fetch_array($res, MYSQL_BOTH)){
if ($fila['descgrupo']==$dados)$sel="selected='selected'";
else $sel='';
$lig.="<option $sel value='".$fila['descgrupo']."'>".$fila['descgrupo']."</option>";
}
}else{
$lig.="<option value='null'>Não há grupos</option>";
}
$lig.="</select><div id='existe'></div>";
mysql_close($link);
echo $lig;
?>
Atprodutos.php
<?
/*-----------UPDATE PRODUCTS*/
include ('../../util/upper/upper.php');//Função que passa as letras para caixa alta
foreach ($_POST as &$value)$value=utf8_decode(upper($value));//Decodifica as informações da página
$link = mysql_connect('localhost', 'root','fbi02');
$db = mysql_select_db("fbinfo",$link);
$query= "SELECT codproduto FROM produtos JOIN gruposproduto AS g ON produtos.idgrupo= g.idgrupo WHERE descproduto='"
.$_POST['descproduto']."' AND marca='".$_POST['marca']."' AND g.descgrupo='". $_POST['descgrupo']."'";
$res = mysql_query($query,$link);
echo mysql_error();
$num=mysql_num_rows($res);
if ($num>0){
$fila=mysql_fetch_array($res);
if ($fila['codproduto']!=$_POST['codproduto']){
echo "O produto já existe";
die;
}
}
$query="UPDATE produtos SET descproduto='".$_POST['descproduto']."' , marca='".$_POST['marca']."' , precos=".$_POST['precos'].", idgrupo=(SELECT idgrupo FROM gruposproduto WHERE descgrupo='".$_POST['descgrupo']."') WHERE codproduto='".$_POST['codproduto']."'";
$res = mysql_query($query,$link);
echo mysql_error();
mysql_close($link);
?>
答案 0 :(得分：0)
如果通过AJAX替换HTML元素，则会丢失事件处理程序。您需要在每次加载后重新初始化事件处理程序。
答案 1 :(得分：0)
错误是在获取列表的AJAX请求中使用false for asyncronous方法。 将asyncronous更改为true并将表的验证和手段设置为envent处理函数，解决了这个问题。
感谢您的帮助，我非常感谢所有为我找到解决方案的想法和解决方案。