Question

我有按钮，它是＆＃34;点击我＆＃34;，而mouseover（）仅适用于此按钮，问题与新按钮有关。我不能用addClass添加css。

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

Answer 1

在这里，因为您动态创建按钮：

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

希望得到这个帮助。

Answer 2

使用父母来捕捉事件，因为选择

时按钮不存在

$("button.Clicker")

然后你应该使用：

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

Answer 3

可能问题在于您在点击时工作我认为您需要绑定.click（）事件

我只是改变了使用我的风格的事件，尝试可能会有效

＆＃13;

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

＆＃13;

可能对您有用

Answer 4

我认为您应该使用.on（）作为由脚本动态添加的元素，如下所示。

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

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

您与.mouseover()事件的直接关联仅适用于随时可用的元素。

但是对于动态创建的元素，您应该使用.on()

我无法将css类添加到新元素中

4 个答案: