如何从 HTML 元素动态地将参数传递给 JQuery 点击事件？答案

【问题标题】：How to pass parameter dynamically to JQuery click event from HTML elements?如何从 HTML 元素动态地将参数传递给 JQuery 点击事件？
【发布时间】：2011-04-12 07:16:01
【问题描述】：

首先，我不得不提一下，我是 JavaScript 和 JQuery 领域的新手。我不确定我是否为我的问题写了一个合适的标题，但我会尽力解释我的问题。

场景：我有一个正在显示名称的项目列表。单击其中一个项目时，应显示一个弹出窗口并显示该项目的描述。单击时通过 AJAX 调用从服务器检索描述。 AJAX 调用需要提供项目的唯一 ID（在数据库中）。这是我的问题，它有两个部分：

我不知道如何以及在何处将项目 ID 包含在 HTML 中。请注意，该列表仅显示项目名称而不是 ID。
假设 1) 已解决，如何将被点击的项目的 ID 传递给 AJAX 调用。

这是项目列表的 HTML。如您所见，它说明了我的问题的第 1 部分（即不知道如何在 HTML 中包含 id）。

<ul>
    <li class="item">Item1</li> <!-- this item has id=1 in the database -->
    <li class="item">Item2</li> <!-- this item has id=2 in the database -->
    <li class="item">Item3</li> <!-- this item has id=3 in the database -->
</ul>

下面是 JQuery click 事件处理程序，它将 AJAX 调用（即 getJSON）发送到服务器。请注意，问题的第 2) 部分由 var item_id = ?? 行说明。注意popup是自定义的javascript。

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $(".item").click(function() {
                var item_id = ??
                var data = {"item_id":item_id};
                $.getJSON("/item/json", data, function(data) {
                    var name = data[0]["fields"]["name"]
                    var description = data[0]["fields"]["description"]
                    popup.call(this, name, description);
                });
            });
        });
    </script>

附加信息：对于服务器端，我使用 Django 1.3，客户端使用 JQuery 1.5.2。我希望我已经把我的问题说清楚了，我感谢各位专家的帮助。谢谢。

这是一个与我正在寻找的示例类似的示例。
http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

http://www.w3schools.com/tags/tag_li.asp

标签支持以下标准属性： id 为元素指定唯一的 id

在这种情况下使用：

<ul>
    <li class="item" id="item_1">Item1</li> <!-- this item has id=1 in the database -->
    <li class="item" id="item_2">Item2</li> <!-- this item has id=2 in the database -->
    <li class="item" id="item_3">Item3</li> <!-- this item has id=3 in the database -->
</ul>

和

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $(".item").click(function() {
            var item_id = $(this).attr('id').replace('item_','');
            var data = {"item_id":item_id};
            $.getJSON("/item/json", data, function(data) {
                var name = data[0]["fields"]["name"]
                var description = data[0]["fields"]["description"]
                popup.call(this, name, description);
            });
        });
    });
</script>

【讨论】：

ARTstudio - 感谢您的回答。鉴于需要解析，我觉得这种方法或多或少是一种 hack。这是一种常见的方法吗？如果所涉及的键不是单个属性而是由多个属性组成，您会使用相同的方法吗？ Acolyte 下面的方法很有趣。您如何将您的方法与他的方法进行比较？很抱歉有这么多后续问题。就像我提到的，我是这个世界的新手，所以我对一切都很好奇。 :)
w3fools.com 在这里可能很有趣，因为您已经给出了对 w3shools 的“权威”引用。
@AJP 感谢您提供有用的链接。我以前从未见过这个资源。
非常感谢，这对我很有帮助！！

【解决方案2】：

Javascript（尤其是 jQuery）用于客户端脚本。因此，您需要在 HTML 文档中提供数据。您可以使用 jQuery 的 Metadata 插件来提供项目 ID：

<li class="item" data="{ItemID: 'Your_Item_ID'}">Item1</li>

并通过以下方式检索它：

var item_id_structure = $(this).metadata().ItemID;

【讨论】：

Acolyte - 感谢您的回答。我对你的方法很感兴趣。 jQuery Metadata 插件的使用有多流行？ ARTstudio 的方法会如何？你知道有什么有用的资源可以让我学习jQuery Metadata 插件吗？
我不能说它有多受欢迎，但我肯定会用它来传达每个元素的附加信息，因为该插件使用起来简单直接。 ARTStudio 的方法很好，只要没有具有完全相同 ID 的节点，并且您的要求是传递标识符而不是其他任何东西。关于这个插件没有太多要学习的东西，但是如果有的话，请查看文档。它所做的只是将 Javascript 数据存储在一个字符串中并使用 eval() 检索它。

【解决方案3】：

如果您的项目名称是唯一的，则通过 Ajax 发送项目名称。这样可以避免项目 ID。

【讨论】：

【解决方案4】：

HTML5 原生支持可以通过 jquery 轻松访问的数据属性

http://api.jquery.com/data/#data-html5

例如，给定以下 HTML：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 1

以下所有 jQuery 代码都可以使用。

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

【讨论】：