两个相同的类，一个有效，一个无效答案

【问题标题】：Two of the same classes, one works, one doesn't两个相同的类，一个有效，一个无效
【发布时间】：2015-11-27 10:46:55
【问题描述】：

所以我正在编写一个 CMS 类型系统，以便用户可以编辑自己的页面。它的工作方式是用户可以在页面上添加任意数量的容器，并且每个容器都有自己的文本编辑器。这些文本编辑器有自己的按钮（如粗体、斜体等）。但是当我有一个容器时，按钮工作得很好，但是当我有两个容器时，第二个按钮不起作用。

这是我的 jquery 代码，（粗体、斜体等功能完全可以使用。） -

            $('.bold').click( function() {
                var mytext = bold();
            });

            $('.italic').click(function(){
                var mytext = italic();
            });
            $('.left').click(function(){
                var mytext = left();
            });
            $('.right').click(function(){
                var mytext = right();
            });
            $('.center').click(function(){
                var mytext = center();
            });

这是按钮代码。 -

<div class="slots">
<input class="bold" type="button" value="">
<input class="italic" type="button" value="">
<input class="left" type="button" value="">
<input class="center" type="button" value="">
<input class="right" type="button" value="">
</div>

问题是，当我只有 1 个按钮集时，它可以工作，但是当我有两个按钮集时，一个可以工作，另一个不能。

【问题讨论】：

当你有两个按钮集时，bold、italic等函数应该如何知道操作哪一个？您没有向他们传递任何参数。
我认为我们需要查看更多代码才能为您提供帮助 - 我的直觉是问题可能涉及 bold()、italic() 等函数。
jQuery: find input field closest to button 的可能重复项

标签： jquery

【解决方案1】：

它应该工作的方式是用户可以添加尽可能多的容器根据需要放到页面上

如果元素被动态添加到 document ，请尝试委托 click 事件

$(document).on("click", ".bold", handler);

$(function() {
$(".abc").on("click", function() {
  console.log(this.textContent)
});

$("<div class=abc />").text("click def")
  .appendTo("body")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div class="abc">click abc</div>
</body>

$(function() {
  $(document).on("click", ".abc", function() {
    console.log(this.textContent)
  });

  $("<div class=abc />").text("click def")
    .appendTo("body")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
  <div class="abc">click abc</div>
</body>

【讨论】：