Question

我有几个div，我在点击时显示一个TextBox。 TextBox是从另一个div复制的。它工作正常，但当我把焦点放在TextBox上时，它就消失了。我做错了什么？

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

Jquery - Textbox隐藏了它的焦点

4 个答案: