Question

我跟随editing a Div的JsFiddle，现在我想要在编辑模式div中添加一个by default。

当我点击Add New div时，会添加新的div，然后点击Edit进行编辑。但我想知道是否有一种方法，当我点击添加新Div时，div应默认为编辑模式。有什么方法可以实现它。

感谢您的帮助：）

Answer 1

按如下方式更改您的功能：

 $("#add").click(function () {
     $('#accordion').prepend($("#appendpanel").clone().removeAttr('id').find('.panel-title, .panel-collapse').attr('contenteditable',true).css('border','2px solid'));
});

检查此JSFiddle

根据评论

Updated Fiddle

注意： 还有其他简洁的方法可以做你想做的事。您可以简单地保留一个隐藏的可编辑div，添加其克隆并使其可见.. 或者创建一个动态添加所需标记的功能..

附注：请避免使用inline-css，原因如下：Why Use CSS @ MDN

用于更改样式属性jQuery具有专用的css()函数

您不需要两个$(document).ready()功能

Answer 2

不是单行，但是做了工作;）

$("#add").click(function () {

   var clone = $("#appendpanel").clone().removeAttr('id');
   $('#accordion').prepend(clone);

   // trigger a click event on the button, which makes the required div's content-editable
   clone.find("#edit1").trigger("click"); 
});

<强> Updated fiddle

更新：

在$('#accordion').on('click', '.delete-link', function () {

中使用此代码

var children = $(".panel");
// get those not hidden
children = children.filter(
    function(index){
        return children.eq(index).css("display") !== "none"; 
    }
).length;

if(children === 1){  // the only child left is "Add new div"
     $("#message").show(500);
}

这在$("#add").click(function () {

中

$("#message").hide(500);

<强> Updated fiddle

在可编辑模式下添加新Div

2 个答案: