JQuery - Текстовое поле скрывается в фокусе

Question

У меня есть несколько div и я показываю TextBox при щелчке. TextBox копируется из другого div. Он работает нормально, но когда я сосредоточен на TextBox, он исчезает. Что я делаю не так?

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

проверки, была ли нажата входной и ничего не делать, если он был

JSFiddle

добавить следующие строки в обработчик щелчка

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

так что все будет выглядеть, как этот

$(".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(); 
} 
}); 

предотвратить обработчик щелчка от выполнения для чего на панели, которая содержит текстовое поле добавить следующую проверку

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

все это выглядит как это

$(".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

Эти две строки вызывают исчезновение.

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

прокомментируйте их, и он должен работать должным образом.

$(".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

Попробуйте этот код ..

$(".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

Я думаю, что это будет работать нормально. изменить эту строку

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