Question

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

这是我的jquery代码，（粗体，斜体，ect函数完全有效。） -

            $('.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>

问题在于，当我只有一个按钮设置时，它可以工作，但是当我有两个按钮组时，一个工作，另一个不工作。

Answer 1

它的工作方式是用户可以添加多少他们想要的容器到页面上

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

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

＆＃13;

$(function() {
$(".abc").on("click", function() {
  console.log(this.textContent)
});

$("<div class=abc />").text("click def")
  .appendTo("body")
})

＆＃13;

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

＆＃13;

$(function() {
  $(document).on("click", ".abc", function() {
    console.log(this.textContent)
  });

  $("<div class=abc />").text("click def")
    .appendTo("body")
})

＆＃13;

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

＆＃13;

两个相同的类，一个工作，一个不工作

1 个答案: