0

我有几个 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>

查询

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

4 回答 4

2

检查输入是否被点击，如果是则什么也不做

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-08T09:58:08.633 回答
1

那两条线导致了消失。

$(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-08T09:42:16.970 回答
1

试试这个代码.. 

$(".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-08T09:44:40.627 回答
1

我认为它会正常工作。将此行更改为

 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-08T09:53:51.597 回答