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>

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

これらの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();
        }
    });
于 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 に答える