I can't add css class to new element

Question

I have button which is "Click me", and mouseover() works for only this button the problem is about new buttons. I cant add css with addClass.

$("button#Clickme").on({

    click:function(){
      $("div.Div").append('<button class="Clicker" >New Button</button>');
    }

});

$("button.Clicker").mouseover(function(){
  $(this).addClass("button");
});
$("button.Clicker").mouseout(function () {
 $(this).removeClass("button");
});

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — CodingIntrigue, Jul 05 '15 at 06:04

score 1 · Accepted Answer · answered Jul 05 '15 at 06:05

Here you are, because you create button dynamically:

      $("button#Clickme").on({

        click: function() {
          $("div.Div").append('<button class="Clicker" >New Button</button>');
        }

      });

      $(document).on('mouseover', 'button.Clicker', function() {
        $(this).addClass("button");
        alert('hhh');
      });

      $(document).on('mouseout', 'button.Clicker', function() {
        $(this).addClass("button");
        alert('hhh');
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Clickme">ClickMe</button>
<div class="Div"></div>

Hope this help.

it works thanks But in second on funcition you wrote addClass() again I think fix it. Someone can face same problem — Tayfun Akgüç, Jul 05 '15 at 06:15

score 1 · Answer 2 · answered Jul 05 '15 at 06:05

1

Use a parent, to catch the event, because the buttons don't exist when selecting

$("button.Clicker")

then You should use:

var $parent = $('body');
$parent.on('mouseover','button.Clicker').function(){
  $(this).addClass("button");
});

answered Jul 05 '15 at 06:05

MoLow

3,056
2
21
41

score 1 · Answer 3 · answered Jul 05 '15 at 06:07

may be the problem is with that you working with on click i think you need to bind .click() event

and i just change the the working with event with my style try may b it will work

    $("button#Clickme").on('click',function(){
          $("div.Div").append('<button class="Clicker" >New Button</button>');      
    });

   $("button.Clicker").mouseover(function(){
      $(this).addClass("button");
   });
   $("button.Clicker").mouseout(function () {
     $(this).removeClass("button");
   });

that might work for you

score 1 · Answer 4 · answered Jul 05 '15 at 07:43

I think you should use .on() for element that is being added dynamically by script as shown below.

  $(document).on('mouseover', 'button.Clicker', function() {
    $(this).addClass("button");
  });

  $(document).on('mouseout', 'button.Clicker', function() {
    $(this).addClass("button");
  });

Your direct connection to .mouseover() event will work only with the elements that are readily available.

But for dynamically created elements, you should use .on()

I can't add css class to new element

4 Answers4