设置文本可点击的问题

时间:2014-05-02 07:50:55

标签: jquery html css comments edit

我想在日期和时间旁边设置文字。如下图所示:

Image

我正在尝试这样编码,但没有成功:

JQuery的:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function addComment(name1) {

     var container = $('#divComments');
     var inputs = container.find('label');
     var id = inputs.length + 1;

     var div = $('<div />', {
         class: 'CommentStyle'
     });

     $('<label />', {
         id: 'comment' + id,
         text: name1
     }).appendTo(div);

     var d = new Date();
     var $fulaDate = $('<div>'+d.getFullYear() + "-" + monthNames[d.getMonth()] + "-" + d.getDate() + "T" + d.getHours() + ":" + d.getMinutes() +'</div>').appendTo(div);

    var $edit = $('<p>'+ { class: 'edit' } + "Edit" +'</p>').appendTo(div);

    $('.edit').click(function () {
            alert('asdfasdfasfasef');

        });

     div.appendTo(container);

 }

 $('#submit').click(function () {
     addComment($('#comments').val());
     $('#comments').val("");
 });

我得到了这个输出:

Image2

正如您所看到的,我无法在直线水平线上获得编辑文本。

有什么想法解决这个问题?

Live Demo

2 个答案:

答案 0 :(得分:1)

以下需要更正:

var $edit = $('<p>'+ { class: 'edit' } + "Edit" +'</p>').appendTo(div);

我认为你的意思是:

var $edit = $('<p />', { class: 'edit', text: 'Edit' }).appendTo(div);

答案 1 :(得分:0)

尝试添加css:Demo

.CommentStyle {
    border: 2px solid black;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow:hidden;
}
.floatleft {
    float:left;
}
p {
    margin:0
}