Question

我正在使用“添加到列表...”按钮动态创建div。动态div分为标题和内容两部分。 div的两个部分都有onclick事件，显示textarea中单击部分的文本。有一个textarea模糊事件，使div返回其原始形式。

当我第三次点击任何div部分时出现问题。它textarea盒损失它的值并开始显示“”

我们将非常感谢您对此问题的任何帮助。我正在分享下面的完整代码，以便清楚理解。

提前致谢：）

<html>
<head>
    <title>Javascript Create Div Element Dynamically</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <style type="text/css">
        body {
            min-width: 520px;
        }

        .column {
            width: 170px;
            float: left;
            padding-bottom: 100px;
        }

        .portlet {
            margin: 0 1em 1em 0;
            padding: 0.3em;
        }

        .portlet-header {
            padding: 0.2em 0.3em;
            margin-bottom: 0.5em;
            position: relative;
        }

        .portlet-toggle {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -8px;
        }

        .portlet-content {
            padding: 0.4em;
        }

        .portlet-placeholder {
            border: 1px dotted black;
            margin: 0 1em 1em 0;
            height: 50px;
        }

        div {
            min-height:20px;
        }

        textarea {
            width: 100%;
            resize:vertical;
        }
    </style>
    <script type="text/javascript" language="javascript">
        $(function () {
            $(".column").sortable({
                connectWith: ".column",
                handle: ".portlet-header",
                cancel: ".portlet-toggle",
                placeholder: "portlet-placeholder ui-corner-all"
            });

            $(".portlet")
              .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
              .find(".portlet-header")
                .addClass("ui-widget-header ui-corner-all")
                .prepend("<span class='ui-icon portlet-toggle ui-icon-minusthick'></span>");

            $(".portlet-toggle").click(function () {
                var icon = $(this);
                icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
                icon.closest(".portlet").find(".portlet-content").toggle();
            });
        });

        function createDiv() {
            //alert("Test!!");
            var divTag = document.createElement("div");

            divTag.className = "column";
            divTag.innerHTML = "<div class='portlet'>" +
                               "<div class='portlet-header'><span class='rubrik' onclick='divClicked(this)'>Feeds</span></div>" +
                               "<div class='portlet-content' onclick='divClicked(this)'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>" +
                               "</div>";

            document.body.appendChild(divTag);

            $(".column").sortable({
                connectWith: ".column",
                handle: ".portlet-header",
                cancel: ".portlet-toggle",
                placeholder: "portlet-placeholder ui-corner-all"
            });

            $(".portlet")
              .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
              .find(".portlet-header")
                .addClass("ui-widget-header ui-corner-all")
                .prepend("<span class='ui-icon portlet-toggle ui-icon-minusthick'></span>");

            $(".portlet-toggle").click(function () {
                var icon = $(this);
                icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
                icon.closest(".portlet").find(".portlet-content").toggle();
            });
        }

    function divClicked(placeholder) {
        var divHtml = $(placeholder).html();
        var editableText = $("<textarea>");
        $(placeholder).html(editableText.val(divHtml));
        $(placeholder).removeAttr("onclick");
        editableText.focus();
        editableText.blur(function () {
            editableTextBlurred(placeholder, editableText);
        });
    }

    function editableTextBlurred(placeholder, editableText) {
        var html = $(editableText).val();
        $(placeholder).on('click', function () {
            divClicked(placeholder);
        });
        var viewableText = html;
        $(editableText).replaceWith(viewableText);
    }
    </script>
</head>
<body>
        <input id="button"
               type="button"
               value="Add to list..." onclick="createDiv();" />

</body>
</html>

Answer 1

在您的函数中 editableTextBlurred 替换

$(placeholder).on('click', function () {
        divClicked(placeholder);
    });

与

$(placeholder).attr("onclick","divClicked(this)");

应该工作。：）

动态div容器textarea在第3次尝试时失去了它的价值

1 个答案: