jquery - 文本框隱藏其重點

我有幾個div，我點擊時顯示一個文本框。 TextBox是從另一個div複製的。它工作正常，但是當我把焦點放在TextBox上時，它就消失了。我究竟做錯了什麼？jquery - 文本框隱藏其重點

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

來源

2013-03-08 enb081

檢查輸入是否被點擊，什麼也不做，如果它是

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

來源

2013-03-08 09:58:08

這是工作正常，但不是'if（$（e.target）.is（「：input」））''我可以讓它如果'（$（e .TARGET）。是（「panel_authenticate_container」））'？ – enb081 2013-03-08 10:00:52

我怎樣才能使它爲panel_authenticate_container和它裏面的所有元素？ – enb081 2013-03-08 10:05:39

太棒了！謝謝！如果你願意，你可以更新答案，這樣對其他人來說更一般和有用，因爲這正是我所期待的 – enb081 2013-03-08 10:14:41

這兩個線造成的消失。

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

來源

2013-03-08 09:42:16 devBinnooh

卜如果div可見，我需要點擊隱藏它！ – enb081 2013-03-08 09:44:45

我明白你的意思，問題在於，單擊該輸入標籤（插入值）會導致點擊'.panel_call'。我仍在考慮周圍的工作！ – devBinnooh 2013-03-08 09:58:42

當點擊其他面板時，它隱藏了這些輸入？如果他們再次點擊div元素，你想隱藏輸入嗎？ – devBinnooh 2013-03-08 10:02:15

試試這個代碼..

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

來源

2013-03-08 09:44:40

謝謝，但是1.如果我點擊一個div，這應該是唯一一個「打開」和2.如果我點擊一個div，它是開放的，它應該關閉。 – enb081 2013-03-08 09:45:57

我認爲它會正常工作。改變這一行來

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

來源

2013-03-08 09:53:51 iswok

謝謝，但如果「打電話1」打開，它應該點擊關閉。 http://jsfiddle.net/PpbWw/2/ – enb081 2013-03-08 09:56:57

jquery - 文本框隱藏其重點

回答

相關問題