javascript - 无法使用 JavaScript 关闭便签

Question

Sticky Notes

下面是我的 fiddle 代码，其中在评论中单击粘滞便笺会出现，但是当我单击右侧关闭按钮时，关闭按钮单击事件不会被触发。我已经通过放置警报弹出窗口来检查是否删除了便条事件是否被触发。

var config = {
    allowedContent: true
};

CKEDITOR.replace('editor1', config);

$('#button').click(function() {
    var dummy = CKEDITOR.instances["editor1"].getSelection().getSelectedText(); 
});
  $(document).ready(function () {

        $("#button").click(
            function () {
            var currentSelectedRange = CKEDITOR.instances.editor1.getSelection().getRanges();
        if(currentSelectedRange && currentSelectedRange.length > 0 && currentSelectedRange[0].startOffset != currentSelectedRange[0].endOffset ){
     var markup =
        '<div class="box note background-gray">' +
        '<div class="box-header">' + 
        '<span class="date-time"></span>' +
        '<a href="#" class="right remove hidden">&times;</a>' +
        '</div><textarea class="note-text"></textarea></div>';

    var spawn = function () {
        $("body").append(makeNote($(markup)));
    };

    var remove = function () {
        $(this).parent().parent().remove();
    };

    var resizeTextArea = function () {
        var self = $(this);
        var spaceToGrab = 60;
        self.find('.note-text').height(self.height() - 45);
    };

    var hideButtons = function (element) {
        $(element).find("a").hide();
    };

    var showButtons = function (element) {
        $(element).find("a").show();
    };

    var save = function (id, value, position) {
        console.log(id); // position
        console.log(value);
        console.log(position);
    };

    var makeNote = function (element) {
        var today = new Date();
        var Time = '';
        if (today.getHours() <= 12) {
            Time += ' AM';
        } //end if
        if (today.getHours() > 12) {
            Time += ' PM';
        } //end if
        var timeStamp = today.getDate() + '/' + today.getMonth() + '/' + today.getFullYear() + ' ' + today.getHours() + ':' + today.getMinutes() +  Time;
    
        var $note = $(element);
         
      	  $(".note.box").add($note).attr('id', function(i, id){
      	    return i;
     	   });
        $note.resizable({
            handles: "se"
        });
        $note.draggable({
            handle: ".box-header"
        });
        $note.find('.date-time').text(timeStamp);

        $text = $note.find('textarea');
        $text.focusout(function (e) {
            save($(this).oid, $(this).val(), $(this).parent().position());
        });
        var comments = {};

     		$note.click(function () {
            $(this).find('textarea').focus();
            if(comments[this.id]){
              var sel = CKEDITOR.instances.editor1.getSelection()
              sel.selectRanges(comments[this.id]);
            }else{
              comments[this.id] = CKEDITOR.instances.editor1.getSelection().getRanges();
            }
        });
           $note.mouseover(function () {
            showButtons(this);
        });
        $note.mouseout(function () {
            hideButtons(this);
        });

        $note.find(".add").click(spawn);
       $note.find(".remove").click(remove);
      
        $note.resize(resizeTextArea);
        hideButtons($note);
        return $note;
    };

    $(".note").each(function (i, e) {
        makeNote(e);
    });

    spawn();
}
            }            
        );
    });

.box {

    min-width: 100px;

    min-height: 100px;

    margin: 20px;

    /* display: ; */
position: absolute;
top: -200px;
left: 40px;
    width: 200px;

}

.note {

    /* box-shadow: h-shadow v-shadow blur spread color inset; */

    box-shadow: 5px 5px 8px #888;

    background-color: lime;

}
.date-time {
  display:block;
  margin:auto;
  display:block;
  position:absolute;
  text-align:center;
  left:0;
  right:0;
}

.box-header {

    min-height: 30px;

    background-color: #e0e0e0;

    text-align: right;

    line-height: 30px;

}

.box-header a {

    display: block;

    margin: 4px;

    width: 20px;

    height: 20px;

    line-height: 20px;

    font-size: 24px;

    text-align: center;

    font-weight: bolder;

    font-family:"Helvetica Neue LT", "Helvetica", "Arial", "sans-serif";

    text-decoration: none;

    color: #666;

    border-radius: 5px;

}

.box-header a:link, .box-header a:visited {

    border: 1px solid #e0e0e0;

}

.box-header a:hover, .box-header a:active {

    border: 1px solid #aaa;

    background-color: #ccc;

}

.left {

    float: left;

}

.right {

    float: right;

}

.hidden {

    display: none;

}

.note-text {

    margin: 0;

    background: none;

    border: none;

    font-family:"Helvetica", "Arial", "sans-serif";

    font-size: 24px;

    width: 100%;

    font-style: italic;

    resize: none;

    overflow: auto;

    outline: none;

    padding: 5px;

}

.background-gray {

    background: #ffffff;

    /* Old browsers */

    background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);

    /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0));

    /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);

    /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);

    /* Opera 11.10+ */

    background: -ms-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);

    /* IE10+ */

    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);

    /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e0e0e0', GradientType=0);

    /* IE6-9 */

}

<script src="http://cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="button">Comment</button>
<textarea id="editor1">
    <table align="center" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td align="center" bgcolor="#ffffff" height="64" style="DISPLAY: block; COLOR: #2980b9; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px" width="342"><a href="http://www.codinghorror.com" style="LINE-HEIGHT: 64px; WIDTH: 100%; DISPLAY: inline-block; FONT-FAMILY: arial, verdana, sans-serif; FONT-SIZE: 24px; FONT-WEIGHT: bold; TEXT-DECORATION: none; text-transform: uppercase;" target="" title=""><span style="COLOR: #2980b9">Styled Link</span> </a></td>
            </tr>
        </tbody>
    </table>
</textarea>

Answer 1

看来您的makenote 功能与您昨天发布的其他fiddle 不一样。我现在使它们完全相同并且工作正常。

这是工作演示: http://jsfiddle.net/bdzht7p6/81/

希望这对您有所帮助!