Question

我有一个由前一个团队成员编写的脚本，由于某种原因，它只允许在其中使用#ids，而不是类。

 $("#content-builder-1,#content-builder-2").templateEditor({
   // options.
 });

我的问题是，我正在使用外部按钮向页面添加项目。当我们想添加其他项目时，我可以看到$("#content-builder")，我们需要将其添加到$("#content-builder-1, #content-builder-2")

因为我正在为页面动态添加带有增量ID的其他div，我想知道如何添加它以便函数自动添加它。

我考虑过使用.on()或.live()，但我不确定如何将其他ID添加到主加载器中。

$("#content-builder-1, #content-builder-2, #content-builder-3")等等。

有没有最好的方法来添加它？

Answer 1

如果您必须坚持当前的方法，即按ID标记不同的元素，您可以使用“id attribute starts with”选择器，如下所示：

$("[id^=content-builder-]").templateEditor({
  // options.
});

然而，插件不可能知道哪种类型的选择器生成了它可以使用的jQuery选择，所以如果它只是“与ids”一起工作是正确的，那必须是因为它内部依赖于每个元素都有一个ID，不是因为它要求元素最初由他们的ID选择。

因此，我的猜测是，给每个元素一个公共类并按其选择应该有效，在这种情况下，您的代码（如其他人所提到的）将如下所示：

$(".content-builder").templateEditor({
  // options.
});

但如上所述，每个元素仍然必须有一个ID才能使插件正常工作。

.on()在这种情况下不相关，因为似乎没有事件正在进行，因此您无法委托给共同的父母。

Answer 2

如前所述，班级名称可行。更清洁的选择，恕我直言，将使用数据属性。

所以，你最终会得到类似的东西：

    <div id="foo" data-role="content-builder">Hello world!</div>
    <div id="bar" data-role="content-builder">Hello world!</div>

你的选择器会是这样的：

$('[data-role="content-builder"]').on('click', function() {    
      alert($(this).attr('id')); 
});

编辑：另一种选择是，如果你想添加某种增量的id，你可以使用这样的属性：

     <div data-content-builder="27" id="yup">Adios</div>
     <div data-content-builder="28" id="Nope">So long</div>

然后您可以通过该属性选择它们，la：

$("[data-content-builder]").on('click', function() { 
    alert($(this).data('content-builder'));
});

以下是一个示例（使用两者更新）：http://jsfiddle.net/xj491uju/

（显然，你做的不仅仅是点击 - 在你的情况下，模板编辑 - 但你明白了。）