Question

如果用户点击其中一个return new SolidColorBrush( Color.FromArgb( 255, Convert.ToByte(hexaColor.Substring(1, 2), 16), Convert.ToByte(hexaColor.Substring(3, 2), 16), Convert.ToByte(hexaColor.Substring(5, 2), 16) ) );，那么颜色和类应该会发生变化。我用这段代码解决了这个问题，但是我注意到在更改类之后事件处理程序不再工作了。

ul s应在每次点击时更改颜色。

ul

$("ul.AAA").click(function() {
  $(this).css("background-color", "yellow");
  $(this).removeClass("AAA");
  $(this).addClass("BBB");
})

$("ul.BBB").click(function() {
  $(this).css("background-color", "blue");
  $(this).removeClass("BBB");
  $(this).addClass("AAA");
})

div#start {
  border: 1px solid black;
  cursor: pointer;
}
ul.AAA {
  background-color: red;
}
ul.BBB {
  background-color: green;
}

我也尝试了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="AAA"> <li> <p>LIST 1</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul> <ul class="BBB"> <li> <p>LIST 2</p> </li> <li> <div> <div>A</div> <div>B</div> <div>C</div> </div> </li> </ul>：

on

$("ul.AAA").on("click", function() {
  $(this).css("background-color", "yellow");
  $(this).removeClass("AAA");
  $(this).addClass("BBB");
})

$("ul.BBB").on("click", function() {
  $(this).css("background-color", "blue");
  $(this).removeClass("BBB");
  $(this).addClass("AAA");
})

div#start {
  border: 1px solid black;
  cursor: pointer;
}
ul.AAA {
  background-color: red;
}
ul.BBB {
  background-color: green;
}

我该如何解决这个问题？

Answer 1

当您动态更改类时，您需要使用on()，但是您需要使用它的委托版本。试试这个：

$(document).on("click", "ul.AAA", function() {
  $(this).css("background-color", "yellow");
  $(this).toggleClass("AAA BBB");
})

$(document).on("click", "ul.BBB", function() {
  $(this).css("background-color", "blue");
  $(this).toggleClass("AAA BBB");
})

div#start {
  border: 1px solid black;
  cursor: pointer;
}
ul.AAA {
  background-color: red;
}
ul.BBB {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="AAA">
  <li>
    <p>LIST 1</p>
  </li>
  <li>
    <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </li>
</ul>
<ul class="BBB">
  <li>
    <p>LIST 2</p>
  </li>
  <li>
    <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </li>
</ul>

另请注意toggleClass()使用addClass()然后removeClass()

Answer 2

目前您使用的是“直接”绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

当操作选择器（如删除和添加类）时，您需要使用Event Delegation委托事件方法.on()。

一般语法

$(document).on('event','selector',callback_function)

实施例

$(document).on("click", "ul.AAA", function() {
    //Rest of your code
});

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

好读Direct and delegated events

Answer 3

＆＃13;

$(document).on("click","ul.AAA",function() {//delegate the event to document
    //$(this).css("background-color", "yellow");
    $(this).removeClass("AAA");
    $(this).addClass("BBB");
  }
)

$(document).on("click","ul.BBB",function() {//delegate the event to document
    //$(this).css("background-color", "blue");
    $(this).removeClass("BBB");
    $(this).addClass("AAA");
  }
)

＆＃13;

div#start {
  border: 1px solid black;
  cursor: pointer;
}
ul.AAA {
  background-color: red;
}
ul.BBB {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="AAA">
  <li>
    <p>LIST 1</p>
  </li>
  <li>
    <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </li>
</ul>
<ul class="BBB">
  <li>
    <p>LIST 2</p>
  </li>
  <li>
    <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </li>
</ul>

＆＃13;

类更改后，单击事件处理程序不起作用

3 个答案: