当 AJAX DHTML 时，事件处理程序在 Firefox 中释放事件

Question

我有一个事件处理程序的问题，该事件处理程序用于使用 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);
    ?>

Answer 1

如果通过 AJAX 替换 HTML 元素，您将丢失事件处理程序。每次加载后您需要重新初始化事件处理程序。

Answer 2

错误在于在获取列表的 AJAX 请求中使用 false 异步方法。
将 asyncronous 更改为 true 并在事件处理函数之外设置表的验证和使用解决了问题。

感谢您的所有帮助，我真的很感谢所有的评论和解决方案，它们给了我很多寻找解决方案的想法。