OnClick 获取“a”标签的“id”属性

Posted 2023-05-09

【中文标题】OnClick 获取“a”标签的“id”属性

【英文标题】：OnClick get "id" attribute of "a" tag

【发布时间】：2013-01-18 09:21:50

【问题描述】：

我在 jQuery Mobile Web 应用程序中有列表视图，此列表视图由以下元素组成：

<li id='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>
<li id='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>

元素的数量取决于搜索结果的数量，不仅仅是这两个。 当我单击列表视图中的元素时，在这种情况下：

<li></li>

我需要做两件事，一是从这个特定的“li”标签（点击的标签）内的“a”标签中分配“id”属性到我称为“search_r”的全局变量。点击事件工作正常，但要从“a”标签获取属性我无法做到。

这是我的 js：

$("#cc_page").ready(function()
  $("#search_r").live('click', function()
      search_r = $(this).attr('id');
      window.location.href = "http://imes.********.com/app/userpanel.html#sfpp_page";
  );
);

我知道“这个”不是解决方案。我对js真的很陌生，所以这就是为什么我要问这么荒谬的问题:)

【问题讨论】：

多个id='search_r' 是一个no-no。

.live() 已弃用。请改用.on()。

实际上尝试使用 .on() 没有运气。在 jQuery 1.8.2 中它工作得很好。

虽然在下一个原型中，我会尝试仅使用最新且未弃用的函数和方法来整理我所有的 js 和 php 文件。

【参考方案1】：

您遇到的第一个问题是重复的search_r id 属性，这是无效的。这些应该更改为类。此外，您应该将on() 与委托处理程序一起使用，因为live() 已从最新版本的jQuery 中删除。试试这个：

<li class='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>
<li class='search_r'>
    <a href='#' id='$id' class='s_result'></a>
</li>

$("#cc_page").on('click', '.search_r', function()
    var search_r = $('a', this).attr('id');
    console.log(search_r); // just to check it works

    // I assume this is just for testing, otherwise leaving the page 
    // immediately on click renders getting the id completely moot.
    //window.location.href = "http://imes.********.com/app/userpanel.html#sfpp_page";
);

我还假设您 HTML 中的 $id 来自某种形式的模板引擎，它会被解释？如果没有，这些也需要变得独一无二。

【参考方案2】：

window.location.href 导致浏览器发出新请求。当新页面加载时，所有变量都将被重置。

search_r 的目标是什么？

【讨论】：

我正在尝试将此值分配给全局变量：search_r，因此单击结果后，将打开新页面，全局变量中的 id 将用于加载此新页面所需的数据.

全局变量的范围仅限于一个请求/响应。如果您需要将值保持得比这更长，您应该考虑通过查询字符串将其传递到新页面，或者甚至可能更改一些内容以使用 Ajax。

我在下一页使用 ajax 来加载关于 id 找到的 db 记录的信息，但我找不到传递它的方法。我的意思是将该链接中的 id 传递到下一页。使用 php 会很容易，但是因为我需要将所有文件保留为 .html，所以我真的不能使用 php 方法。

【参考方案3】：

.live 自 v1.7 起已在 jQuery 中弃用，并已在 v1.9 中删除。

你应该用.on()替换它。

.on 有 2 种用于绑定元素的语法，而 .live 只有 1 种。

如果元素在你绑定的时候已经存在，你可以这样做：

$('.element').on('click', function()
    .......
);

你甚至可以使用简写：

$('.element').click(function()
    .........
);

如果该元素当时不存在，或者会添加新元素（这是.live通常使用的），则需要使用“事件委托”：

$(document).on('click', '.element', function()
    .............
);

注意：您希望绑定到最近的静态元素，而不是总是document。

与此同时，如果您将 jQuery 升级到最新版本，jQuery Migrate plugin 可用于恢复 .live() 功能。