Question

在我的html代码中，我使用id＆＃39; #mutable＆＃39;更改所有元素的背景颜色，点击按钮＆＃39; blue＆＃39;或者＆＃39; red＆＃39;。使用第三个按钮＆＃39;加载＆＃39; i .append（）一个具有相同id的新HTML。但是新元素的背景颜色没有变化？怎么回事？

fiddle

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

 });

Answer 1

您始终在创建ID为#mutable的新div。现在jQuery就ID而言只是沿着DOM运行，当它找到你的ID的第一次出现时，它会改变它，但没有别的。

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

或者您可以使用#mutable1，#mutable2之类的数字枚举您的ID，然后更改您的菜单以选择特定的div。

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

Answer 2

1）id在页面上应该是唯一的。像#mutable这样的选择器只匹配具有这种id的第一个元素 - 所以在按下'load'后你创建了具有相同id的新元素，但是$仍然匹配旧的

2）尝试下一步（我只是将您的id-selector更改为attr-selector，允许查找所有id为的元素）：

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

http://jsfiddle.net/q3wzwr6z/

jquery - css在.after（）之后不起作用

2 个答案: