problem with dblclick event

Asked

Viewed 68 times

1

I have a code that was working and from one day to the next it stopped working, I don’t understand why this !!

It’s not even firing 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 come 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

  • you are using which browser ? presses F12 and goes on console and see if it is written something and put here

  • I use Chrome amg, it is updated in the latest version and the event does not fire ... check that I put a console.log() to see if it is triggering the event and nothing appears.

2 answers

0

The error is in the application of the 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 method Trim in Javascript has the following syntax:

string.trim()

Documentation

Reproduction:

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>
<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>

  • I made the change and it was not done, nor the console.log() event showing .... and about this change, it worked the way it was. !!

  • I put in the answer a reproduction of the code working. See if it is wrong somewhere.

  • yes, I saw that this working ,,,, but in my application still giving no answer ! ... which can be, very strange that

  • Well, the only apparent error in the code was the trim. Otherwise I had to analyze all the code that is not in the question. If you want to create a Jsfiddle with all the code I can analyze for you.

  • ok friend .... now I’m going home to rest ..... tomorrow put !!! Have a great night and thank you

  • I performed some tests and found the reason for the error in the following part: if($('td > input').length > 0){ // checks if there is already any input in the <td> Return; } What is the problem in this part ? because it worked and in jsfiddletbm it works

Show 1 more comment

0

I ran your code you are using Trim the wrong way syntax is string.Trim() and not Trim(string) You can see running here https://jsfiddle.net/hq5omaop/4/

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();

        });




    });

Browser other questions tagged php javascript html jquery

You are not signed in. Login or sign up in order to post.