problem with dblclick event

Question

problem with dblclick event

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a code that was working and from one day to the other stopped working, I do not understand why!

You're not even triggering the event ...

I followed the code below:

<table style="width: auto;" id="tblEditavel" >
<thead>
   <tr>

      <th style=" text-align: center; width: 50px; ">Valor</th>

   </tr>
</thead>

<tbody>

<tr>

    <td class="editavel" style="text-align: center; width: auto ; font-weight: bold;"> abc </td>


  </tr>
</tbody>
</table>

js comes here:

jQuery(function($) {


            $('#tblEditavel tbody tr td.editavel').dblclick(function(){
      //$('.editavel').dblclick(function(){

                if($('td > input').length > 0){ // verifica se já existe algum input já na <td>
                   return;
                }

          console.log('teste');

                var conteudoOriginal = $(this).text();
                var novoElemento = $("<input type='text' value='"+trim(conteudoOriginal)+"' class='campo_altera' />");      

                $(this).html(novoElemento.bind('blur keydown', function(e){

                var keyCode = e.which;
                var conteudoNovo = $(this).val();

                    if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){

                        var objeto = $(this);

                        $.ajax({
                            type:"POST",
                            url:"assets/php/alterar_vt.php",
                            data:{

                                valor_antigo:conteudoOriginal,
                                valor_novo:conteudoNovo

                            },
                            success:function(result){
                                objeto.parent().html(conteudoNovo);
                                $('body').append(result);
                            }
                        })


                    }else if( keyCode == 27 || e.type == 'blur')

                        $(this).parent().html(conteudoOriginal);
                }));

                $(this).children().select();

            });




        });

php javascript html jquery

asked by anonymous 20.02.2018 / 22:22

2 answers

publishProgress () updates onProgressUpdate () only at the end of doInBackground () Bootstrap selectpicker in bootstrap 4

score 0 · Answer 1

I checked your code and you are using the trim in the wrong way syntax is string.trim () and not trim (string) You can see it working here link

jQuery(function($) {


        $('#tblEditavel tbody tr td.editavel').dblclick(function(){
  //$('.editavel').dblclick(function(){
            if($('td > input').length > 0){ // verifica se já existe algum input já na <td>
               return;
            }

      console.log('teste');

            var conteudoOriginal = $(this).text();
            var novoElemento = $("<input type='text' value='"+conteudoOriginal.trim()+"' class='campo_altera' />");      

            $(this).html(novoElemento.bind('blur keydown', function(e){

            var keyCode = e.which;
            var conteudoNovo = $(this).val();

                if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){

                    var objeto = $(this);

                    $.ajax({
                        type:"POST",
                        url:"assets/php/alterar_vt.php",
                        data:{

                            valor_antigo:conteudoOriginal,
                            valor_novo:conteudoNovo

                        },
                        success:function(result){
                            objeto.parent().html(conteudoNovo);
                            $('body').append(result);
                        }
                    })


                }else if( keyCode == 27 || e.type == 'blur')

                    $(this).parent().html(conteudoOriginal);
            }));

            $(this).children().select();

        });




    });

score 0 · Answer 2

The error is in the application of method .trim() in this line:

var novoElemento = $("<input type='text' value='"+trim(conteudoOriginal)+"' class='campo_altera' />");

Change to:

var novoElemento = $("<input type='text' value='"+conteudoOriginal.trim()+"' class='campo_altera' />");

The trim method in JavaScript has the following syntax:

string.trim()

Documentation

Playback:

jQuery(function($) {


            $('#tblEditavel tbody tr td.editavel').dblclick(function(){
      //$('.editavel').dblclick(function(){

                if($('td > input').length > 0){ // verifica se já existe algum input já na <td>
                   return;
                }

          console.log('teste');

                var conteudoOriginal = $(this).text();
                var novoElemento = $("<input type='text' value='"+conteudoOriginal.trim()+"' class='campo_altera' />");      

                $(this).html(novoElemento.bind('blur keydown', function(e){

                var keyCode = e.which;
                var conteudoNovo = $(this).val();

                    if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){

                        var objeto = $(this);

                        $.ajax({
                            type:"POST",
                            url:"assets/php/alterar_vt.php",
                            data:{

                                valor_antigo:conteudoOriginal,
                                valor_novo:conteudoNovo

                            },
                            success:function(result){
                                objeto.parent().html(conteudoNovo);
                                $('body').append(result);
                            }
                        })


                    }else if( keyCode == 27 || e.type == 'blur')

                        $(this).parent().html(conteudoOriginal);
                }));

                $(this).children().select();

            });




        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablestyle="width: auto;" id="tblEditavel" >
<thead>
   <tr>

      <th style=" text-align: center; width: 50px; ">Valor</th>

   </tr>
</thead>

<tbody>

<tr>

    <td class="editavel" style="text-align: center; width: auto ; font-weight: bold;"> abc </td>


  </tr>
</tbody>
</table>