Jquery - Textbox cache son focus

Question

J'ai plusieurs divs et je montre un TextBox sur click. Le TextBox est copié à partir d'un autre div. Cela fonctionne bien, mais quand je mets l'accent sur le TextBox, il disparaît. Qu'est-ce que je fais mal?

JSFIDDLE

HTML

<table> 
     <tr> 
      <td> 
       <div class="panel_call"> 
        Call 1 
        <div class="panel_authenticate_container" style="display: none"> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="panel_call"> 
        Call 2 
        <div class="panel_authenticate_container" style="display: none"> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <div class="panel_authenticate" style="display: none;"> 
     Email: 
     <input id="Text1" type="text" /> 
    </div> 

JQUERY

$(".panel_call").click(function(e) { 
      if ($(e.target).closest("tr").find(".panel_authenticate_container").is(":visible")) { 
       var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
       $(".panel_authenticate").html(c); 
       $(e.target).closest("tr").find(".panel_authenticate_container").html(""); 
       $(e.target).closest("tr").find(".panel_authenticate_container").hide(); 
      } 
      else { 
       if ($(".panel_authenticate_container:visible").length > 0) { 
        var b = $(".panel_authenticate_container:visible").html(); 
        $(".panel_authenticate").html(b); 
        $(".panel_authenticate_container:visible").html(""); 
        $(".panel_authenticate_container:visible").hide(); 
       } 
       var a = $(".panel_authenticate").html(); 
       $(e.target).closest("tr").find(".panel_authenticate_container").html(a); 
       $(e.target).closest("tr").find(".panel_authenticate_container").show(); 
       $(".panel_authenticate").html(""); 
       $(".panel_authenticate").hide(); 
      } 
     }); 

Answer 1

vérifier si l'entrée a été cliqué et ne rien faire si elle était

JSFiddle

ajouter les lignes suivantes au gestionnaire de clic

if ($(e.target).is(":input")) 
    return; 

donc tout cela va ressembler à ceci

$(".panel_call").click(function(e) { 
if ($(e.target).is(":input")) 
    return; 
if ($(e.target).closest("tr").find(".panel_authenticate_container").is(":visible")) { 
    var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
    $(".panel_authenticate").html(c); 
    $(e.target).closest("tr").find(".panel_authenticate_container").html(""); 
    $(e.target).closest("tr").find(".panel_authenticate_container").hide(); 
} 
else { 
    if ($(".panel_authenticate_container:visible").length > 0) { 
     var b = $(".panel_authenticate_container:visible").html(); 
     $(".panel_authenticate").html(b); 
     $(".panel_authenticate_container:visible").html(""); 
     $(".panel_authenticate_container:visible").hide(); 
    } 
    var a = $(".panel_authenticate").html(); 
    $(e.target).closest("tr").find(".panel_authenticate_container").html(a); 
    $(e.target).closest("tr").find(".panel_authenticate_container").show(); 
    $(".panel_authenticate").html(""); 
    $(".panel_authenticate").hide(); 
} 
}); 

pour empêcher le gestionnaire de clic d'exécuter quoi que ce soit dans le panneau qui contient la zone de texte ajouter le contrôle suivant

if ($(e.target).is(".panel_authenticate_container *, .panel_authenticate_container")) 
    return; 

la chose ressemble ce

$(".panel_call").click(function(e) { 
if ($(e.target).is(".panel_authenticate_container *, .panel_authenticate_container")) 
    return; 
if ($(e.target).closest("tr").find(".panel_authenticate_container").is(":visible")) { 
    var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
    $(".panel_authenticate").html(c); 
    $(e.target).closest("tr").find(".panel_authenticate_container").html(""); 
    $(e.target).closest("tr").find(".panel_authenticate_container").hide(); 
} 
else { 
    if ($(".panel_authenticate_container:visible").length > 0) { 
     var b = $(".panel_authenticate_container:visible").html(); 
     $(".panel_authenticate").html(b); 
     $(".panel_authenticate_container:visible").html(""); 
     $(".panel_authenticate_container:visible").hide(); 
    } 
    var a = $(".panel_authenticate").html(); 
    $(e.target).closest("tr").find(".panel_authenticate_container").html(a); 
    $(e.target).closest("tr").find(".panel_authenticate_container").show(); 
    $(".panel_authenticate").html(""); 
    $(".panel_authenticate").hide(); 
} 
}); 

JSFiddle

Answer 2

Ces deux lignes sont à l'origine de la disparition.

$(e.target).closest("tr").find(".panel_authenticate_container").html(""); 
$(e.target).closest("tr").find(".panel_authenticate_container").hide(); 

les commenter, et cela devrait fonctionner correctement.

$(".panel_call").click(function(e) { 
     if ($(e.target).closest("tr").find(".panel_authenticate_container").is(":visible")) { 
      var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
      $(".panel_authenticate").html(c); 
      //$(e.target).closest("tr").find(".panel_authenticate_container").html(""); 
      //$(e.target).closest("tr").find(".panel_authenticate_container").hide(); 
     } 
     else { 
      if ($(".panel_authenticate_container:visible").length > 0) { 
       var b = $(".panel_authenticate_container:visible").html(); 
       $(".panel_authenticate").html(b); 
       $(".panel_authenticate_container:visible").html(""); 
       $(".panel_authenticate_container:visible").hide(); 
      } 
      var a = $(".panel_authenticate").html(); 
      $(e.target).closest("tr").find(".panel_authenticate_container").html(a); 
      $(e.target).closest("tr").find(".panel_authenticate_container").show(); 
      $(".panel_authenticate").html(""); 
      $(".panel_authenticate").hide(); 
     } 
    }); 

Answer 3

Essayez ce code ..

$(".panel_call").click(function (e) { 
    if ($(e.target).closest("tr").find(".panel_authenticate_container").is(":visible")) { 
     var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
     $(".panel_authenticate").html(c); 

     if (e.target.nodeName == "DIV") { 
      $(e.target).closest("tr").find(".panel_authenticate_container").hide(); 
     } 
    } else { 
     if ($(".panel_authenticate_container:visible").length > 0) { 
      var b = $(".panel_authenticate_container:visible").html(); 
      $(".panel_authenticate").html(b); 
      $(".panel_authenticate_container:visible").html(""); 
      $(".panel_authenticate_container:visible").hide(); 
     } 
     var a = $(".panel_authenticate").html(); 
     $(e.target).closest("tr").find(".panel_authenticate_container").html(a); 
     $(e.target).closest("tr").find(".panel_authenticate_container").show(); 
     $(".panel_authenticate").html(""); 
     $(".panel_authenticate").hide(); 
    } 
}); 

Answer 4

Je pense que cela fonctionnera très bien. changer cette ligne

var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
$(".panel_authenticate").html(c); 

à

var c = $(e.target).closest("tr").find(".panel_authenticate_container").html(); 
$(".panel_authenticate").html(c.clone().html()); 
c.remove();