Question

所以我有一个小应用程序，我只是单击一个按钮并动态添加div。

当您单击“文本按钮”时，您将看到正在生成的Bootstrap面板。您可以从右侧或左侧重新调整大小。

但是一旦再次单击该按钮添加另一个面板，只有第二个（刚刚添加）可以调整大小，但旧的不再可以调整大小。为什么会这样？

我希望他们都可以调整大小。我尽力保持他们的身份独特，这样他们就不会发生冲突或造成任何问题。

下面是我为点击按钮编写的javascript代码。

        var richTextDiv = 0;
richTextLink.onclick = function (e) {
        e.preventDefault();

        richTextDiv++;

        sortable.innerHTML +='<article id="rich_text_' + richTextDiv + '" class="text">'
        +'<div class="panel panel-info richText_panel **texts** rich_text_panel' + richTextDiv + '">'

        +'  <div class="panel-heading">'

        +'      Rich Text'

        +'  <button type="button" class="close" onclick="removeWidget('+richTextDiv+',\'rich_text_\')" aria-hidden="true">&times;</button>'
        +'  </div>' // bootstrap panel heading end

        +'<div class="panel-body">'

        +'<div class="summernote-'+richTextDiv+'">Hello</div>'

        +'</div>'

              +'</div>'

        +'</article>';

        $( ".texts" ).resizable({ minWidth: 311, handles: 'e, w' });}

和sortable只是我正在附加的身体内部的div，如上所示，创建如下：

<div id="content">
<h1 class="title"> Canvas </h1>
<div id="sortable">

此外，“文本”是我自己的类，我已将其分配给与“面板”相同的div。我打电话给“文本”可以调整大小。我也尝试将resizeable调用为只生成div的唯一id，但这样做也是如此。

我想我已经提供了所有信息，但如果需要其他任何东西来理解这个问题，我也很乐意提供这些信息。

我真的很感激任何这方面的帮助，并希望解决这个问题，因为我已经坚持了这个问题很长一段时间了。

Answer 1

不确定为什么它不会像你那样工作，但它使用jQuery.appendTo()方法。这是一个小提琴的链接：http://jsfiddle.net/VYxUk/2/

更新，经过一番挖掘，我想我知道它为什么不起作用。此stackoverflow答案表明“innerHTML从文档中分离所有现有DOM节点”。 What is better, appending new elements via DOM functions, or appending strings with HTML tags?

除了那个答案，我似乎无法找到更多有关原因的信息：/

Jquery resizable仅适用于最近（最后）动态创建的div

1 个答案: