Two of the same classes, one works, one doesn't

Question

So I am programming a CMS type system so that a user can edit their own page. The way it is supposed to work is that the user can add as many containers as they want onto the page and each of those containers have their own text editor. Those text editors have their own buttons (Like bold, italics, ect). But when I have one container the buttons work just fine, but then when I have two containers the second piece of buttons do not work.

Here is my jquery code, (The bold, italic, ect functions work completely.) -

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

And this is the button code. -

<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>

The problem is that, when I have only 1 button set it works, but when I have two button sets one works and the other does not.

When you have two button sets, how are the `bold`, `italic`, etc. functions supposed to know which one to operate on? You're not passing them any arguments. — T.J. Crowder, Sep 02 '15 at 04:06
I think we will need to see more code to be able to help you - my intuition is that the problem probably involves the `bold()`, `italic()`, etc. functions. — Maximillian Laumeister, Sep 02 '15 at 04:07
possible duplicate of [jQuery: find input field closest to button](http://stackoverflow.com/questions/20357017/jquery-find-input-field-closest-to-button) — Ken Y-N, Sep 02 '15 at 04:08

guest271314 · Accepted Answer · 2015-09-02T04:22:33.403

The way it is supposed to work is that the user can add as many containers as they want onto the page

If elements are dynamically added to document , try delegating click event

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

Two of the same classes, one works, one doesn't

1 Answers1