保存div元素onClick的样式

Question

我曾在我的网站的实用工具，人们可以配置自己的活动计划，其中，用户将创建div一些buttons.The DIV的点击将是具有上创造的标签，这将是编辑（courtsey： HTTP：//的jsfiddle .net / alforno / 4A9N8 / ）

HTML：

    <div class="row" style="float: left; position: relative">
          <button type="button" class="btn btn-success square">Table</button>
          <button type="button" class="btn btn-primary circle">RoundTable</button>
          <button type="button" class="btn btn-primary square">Stage</button>
      </div>

            <br />
            <br />

     <div class="row">
      <div class="box" style="border: double; min-height: 500px; min-width: 600px"></div>
     <input type="button" class="btn btn-1a btn-warning btnSaveStyle" value="Save Style" />
 </div>

剧本 ：

<script type="text/javascript">

        $(function () {
                $(".square").click(function () {
                    $(".box").append("<div style='text-align:center' class='comp1'><label class='label1' style='position:relative;top:30px'>edit text</label><input class='clickedit' type='text' style='width:25px' /></div>");
                    $(".box .comp1").resizable({ containment: ".box" });
                    $(".box .comp1").draggable({ containment: ".box" });

                    var defaultText = 'edit text';

                    function endEdit(e) {
                        var input = $(e.target),
                        label = input && input.prev();

                        label.text(input.val() === '' ? defaultText : input.val());
                        input.hide();
                        label.show();
                    }

                    $('.clickedit').hide()
                                .focusout(endEdit)
                                .keyup(function (e) {
                                    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                                        endEdit(e);
                                        return false;
                                    } else {
                                        return true;
                                    }
                                })
                                .prev().click(function () {
                                    $(this).hide();
                                    $(this).next().show().focus();
                                });
                });

                $(".circle").click(function () {
                    $(".box").append("<div class='comp2'></div>");
                    $(".box .comp2").resizable({ containment: ".box" });
                    $(".box .comp2").draggable({ containment: ".box" });
                });
            });
            //save style script :

            $(".btnSaveStyle").click(function () {
                alert(2);
                $(".box").children(".comp1").each(function () {
                    alert(1);
                    var style = $(this).attr('style');
                    var componentClass = $(this).attr('class');
                    alert("Style Comp1 : " + style + "#\n" + "Class Comp1 :" + componentClass + "Label :" + label);
                });

                $(".box").children(".comp2").each(function () {
                    var style2 = $(this).attr('style');
                    var componentClass2 = $(this).attr('class');
                    alert("Style Comp2 : " + style2 + "#" + "Class Comp2 :" + componentClass2);
                });
            });


        </script>

在单击“ Save Style按钮时，我需要保存各个div元素的样式。这在一段时间之前已经起作用，但是现在相同的功能无法正常工作。

可能是什么问题呢 ？

小提琴： http : //jsfiddle.net/2tzkj7nr/1/

Answer 1

我检查了JSFiddle，浏览器JavaScript控制台指出了以下内容：

ReferenceError: label is not defined

因此，我注意到您尚未初始化标签变量。 因此，您删除标签部分或创建标签变量

....componentClass + "Label :" + label);

要么

var label = ...

要获取我使用的输入字段的值：

var label = $(".clickedit").val();