jQuery .on() 不适用于 2 个类答案

【问题标题】：jQuery .on() is not working for 2 classesjQuery .on() 不适用于 2 个类
【发布时间】：2023-03-25 00:10:01
【问题描述】：

这是我的代码，我想为两个分页类链接触发点击事件。但它只适用于 1 节课。

<section id="search-result">
        <p class="pagination">
            <a data-ci-pagination-page="0">‹ First</a>
            <a rel="prev" data-ci-pagination-page="10"><</a>
            <a data-ci-pagination-page="0">1</a>
            <a data-ci-pagination-page="10">2</a>
            <strong data-ci-pagination-page="20">3</strong>
            <a href="/10" data-ci-pagination-page="30" rel="next">></a>
            <a href="/550" data-ci-pagination-page="550">Last</a>
        </p>
        <div class="results">
        </div>
        <p class="pagination">
            <a data-ci-pagination-page="0">‹ First</a>
            <a rel="prev" data-ci-pagination-page="10"><</a>
            <a data-ci-pagination-page="0">1</a>
            <a data-ci-pagination-page="10">2</a>
            <strong data-ci-pagination-page="20">3</strong>
            <a href="/10" data-ci-pagination-page="30" rel="next">></a>
            <a href="/550" data-ci-pagination-page="550">Last</a>
        </p>
    </section>
$('.pagination').on( "click",'a', function(e) {
    $(this).css('color','red')
});

【问题讨论】：

它应该可以工作。控制台中的任何错误。？
这段代码明显有效：jsfiddle.net/gnvp2oto 看来你的调试有误。
@ANS 是的，代码正在运行。但它不能在两个课程上同时工作
@David $(this).css('color','red') 试试这个。它会改变一个分页类的一个链接的颜色
@FatimaZohra：它改变了被点击链接的颜色。（简而言之，在浏览器导航到链接目标之前。）this 指的是什么。这正是我所期望的。你试图做什么？

标签： jquery event-handling

【解决方案1】：

我认为它的工作，检查一下

$('.pagination').on("click", 'a', function(e) {
  alert('hi')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="search-result">
<p class="pagination">
  <a data-ci-pagination-page="0">‹ First</a>
  <a rel="prev" data-ci-pagination-page="10"></a>
  <a data-ci-pagination-page="0">1</a>
  <a data-ci-pagination-page="10">2</a>
  <strong data-ci-pagination-page="20">3</strong>
  <a href="/10" data-ci-pagination-page="30" rel="next">></a>
  <a href="/550" data-ci-pagination-page="550">Last</a>
</p>
<div class="results">
</div>
<p class="pagination">
  <a data-ci-pagination-page="0">‹ First</a>
  <a rel="prev" data-ci-pagination-page="10"></a>
  <a data-ci-pagination-page="0">1</a>
  <a data-ci-pagination-page="10">2</a>
  <strong data-ci-pagination-page="20">3</strong>
  <a href="/10" data-ci-pagination-page="30" rel="next">></a>
  <a href="/550" data-ci-pagination-page="550">Last</a>
</p>
</section>

【讨论】：

试试这个$(this).css('color','red')，它会改变一个分页类的一个链接的颜色
@FatimaZohra $('this') 将始终以当前对象为目标。您不能使用$('this') 更改这两个元素；）