CSS 在 .after(） 之后不起作用

css does not work after .after()

本文关键字：之后 不起作用 after CSS      更新时间：2023-09-26

在我的 html 代码中，我通过单击"蓝色"或"红色"按钮更改所有 ID 为"#mutable"的元素的背景颜色。使用第三个按钮"加载"我.append((具有相同ID的新HTML。但是新元素的背景颜色没有改变吗？出了什么问题？

小提琴

.html

<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>

.js

$(document).ready(function() {
  $('#blue').on('click', function() {
    $('#mutable').trigger('blue');
  });
  $('#red').on('click', function() {
    $('#mutable').trigger('red');
  });
  $('#load').live('click', function(event) {
        event.preventDefault();
        $('#newHTML').after('<div id='"mutable'" style='"width:50px;height:50px;'">...</div>');
      event.stopPropagation();
  });
  $('#mutable').bind('red', function(e) {
   $('#mutable').addClass('red').removeClass('blue');
  });
  $('#mutable').bind('blue', function(e) {
    $('#mutable').addClass('blue').removeClass('red');
  });
 });

您总是创建一个 id #mutable 的新div。现在，就 ID 而言，jQuery 只是沿着 DOM 运行，当它找到您的 ID 的第一次出现时，它会更改它，但不会更改其他内容。

对于某些解决方案，您可以使用类.mutable而不是 id - 但是每个创建的div 都会在单击时更改。

或者，您可以使用 #mutable1 、#mutable2等数字枚举您的 ID，并更改菜单以选择特定的div。

或者，要仅更改动态创建的div 的最后一次出现，请使用:last - CSS- 伪类。

1( id 在页面上应该是唯一的。像这样的选择器#mutable只匹配第一个元素和这样的 id ——所以在按"加载"后，你创建具有相同 id 的新元素，但 $ 仍然匹配旧元素

2(尝试下一步(我只是将您的id选择器更改为attr选择器，允许找到所有带有id的元素(： 

$('#mutable').bind('blue', function(e) {
      //alert('blue');
      $('[id=mutable]:last').addClass('blue').removeClass('red');
});

http://jsfiddle.net/q3wzwr6z/

相关文章：