用.data在DIV appendTo中的DIV

Question

我正在尝试将一个包含div的div应用到我页面上的特定元素（带有appendTo）中 ，然后使其可拖动。 对AppendTo进行单独潜水，使其可拖动即可正常工作。 我无法弄清楚的是如何在我使用appendTo的div中放置一个div。

我将先发布有效的脚本，然后再发布无效的脚本，并在其中添加额外的div。

起作用的脚本：

$('<div>' + rText[i] + '</div>').data('number', next[i]).attr('id', +next[i]).attr('class', 'rtitle').appendTo($("#" + id).parent()).draggable({
  containment: '.site-wrapper',
  stack: '#testpile div',
  cursor: 'move',
  revert: true
}).hide().fadeIn(2000);

无效的脚本：

$('<div>' + ('<div>' + rText[i] + '</div>').data('number', next[i]).attr('id', +next[i]).attr('class', 'rtext text-justify') + '</div>').data('number', next[i]).attr('id', +next[i]).attr('class', 'rtitle').appendTo($("#" + id).parent()).draggable({
  containment: '.site-wrapper',
  stack: '#testpile div',
  cursor: 'move',
  revert: true
}).hide().fadeIn(2000);

我非常确定我的语法不正确，或者我只是在使用错误的机制来完成我想做的事情。

Answer 1

您正在尝试做的是将jQuery对象以及HTML字符串和函数结合在一起，这就是问题所在。

第一条规则是尝试以对您有意义的方式设置代码格式。 然后，很容易找出错误的出在哪里。

让我们尝试分解您的代码。

这部分

$('<div>' + ('<div>' + rText[i] + '</div>').data('number', next[i]).attr('id', +next[i]).attr('class', 'rtext text-justify') + '</div>')

应该是这样的

$('<div>')
  .append(
    $('<div>' + rText[i] + '</div>')
      .data('number', next[i])
      .attr('id', +next[i])
      .attr('class', 'rtext text-justify')
  )

完整的代码

$('<div>')
  .append(
    $('<div>' + rText[i] + '</div>')
      .data('number', next[i])
      .attr('id', +next[i])
      .attr('class', 'rtext text-justify')
  )
  .data('number', next[i]).attr('id', +next[i]).attr('class', 'rtitle')
  .appendTo($("#" + id).parent())
  .draggable({
    containment: '.site-wrapper',
    stack: '#testpile div',
    cursor: 'move',
    revert: true
  }).hide().fadeIn(2000);