Javascript 如何将参数从 HTML 元素动态传递给 JQuery click 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5631681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass parameter dynamically to JQuery click event from HTML elements?
提问by tamakisquare
First of all, I have to mention that I am a newbie in the JavaScript and JQuery world. I am not sure if I put down an appropriate title for my question but I'll try my best to explain my problem.
首先，我不得不提一下，我是 JavaScript 和 JQuery 世界的新手。我不确定我是否为我的问题取了一个合适的标题，但我会尽力解释我的问题。
Scenario:I have a list of items whose names are being displayed. When one of the items is being clicked, a popup should show up and display the description of the item. The description is retrieved from the server via an AJAX call upon the click. The AJAX call requires the unique id of the item (in the database) to be provided. Here comes my problem which has two parts:
场景：我有一个正在显示名称的项目列表。当单击其中一个项目时，应显示一个弹出窗口并显示该项目的描述。单击时通过 AJAX 调用从服务器检索描述。AJAX 调用需要提供项目（在数据库中）的唯一 ID。这是我的问题，它有两个部分：
- I don't know how and where to include the item id in the HTML. Note that the list only displays item name not id.
- Assume 1) is resolved, how can I pass the id of the item that's being clicked to the AJAX call.
- 我不知道如何以及在何处在 HTML 中包含项目 ID。请注意，该列表仅显示项目名称而不是 id。
- 假设 1) 已解决，如何将被单击的项目的 id 传递给 AJAX 调用。
This is the HTML of the list of items. As you can see, it illustrates part 1) of my problem (ie. don't know how to include the ids in the HTML).
这是项目列表的 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>
Below is the JQuery click event handler that sends the AJAX call (ie. getJSON) to the server. Note that the part 2) of the problem is illustrated by the line var item_id = ??. Note that popupis a self-defined javascript.
下面是将 AJAX 调用（即 getJSON）发送到服务器的 JQuery 单击事件处理程序。请注意，问题的第 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>
Additional Info:For the server side I use Django 1.3, and JQuery 1.5.2 for the client side. I hope I have made my question clear and I appreciate any help from you experts. Thanks.
附加信息：对于服务器端，我使用 Django 1.3，客户端使用 JQuery 1.5.2。我希望我已经把我的问题说清楚了，我感谢各位专家的帮助。谢谢。
Here is an example that is similar to what I am looking for.
http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P
这是一个类似于我正在寻找的示例。
http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P
回答by Arthur Halma
http://www.w3schools.com/tags/tag_li.asp
http://www.w3schools.com/tags/tag_li.asp
The < li > tag supports the following standard attributes: idSpecifies a unique id for an element
的<LI>标签支持以下标准属性： ID指定一个唯一的id为元素
In this case use:
在这种情况下使用：
<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>
And
和
<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>
回答by Daniel Protopopov
Javascript (and jQuery in particular) are used for client-side scripting. As such, you will need to supply the data within the HTML document. You can use jQuery' Metadataplug-in to supply the item ID:
Javascript（尤其是 jQuery）用于客户端脚本。因此，您需要在 HTML 文档中提供数据。您可以使用 jQuery 的Metadata插件来提供项目 ID：
<li class="item" data="{ItemID: 'Your_Item_ID'}">Item1</li>
and retrieve it via:
并通过以下方式检索它：
var item_id_structure = $(this).metadata().ItemID;
回答by Sai Kumar
If your item names are unique, then send the item names via Ajax.That way you can avoid Item ID's.
如果您的项目名称是唯一的，则通过 Ajax 发送项目名称。这样您就可以避免项目 ID。
回答by giorgio79
HTML5 natively supports data attributes that can be easily accessed with jquery
HTML5 原生支持可以通过 jquery 轻松访问的数据属性
http://api.jquery.com/data/#data-html5
http://api.jquery.com/data/#data-html5
For example, given the following HTML:
例如，给定以下 HTML：
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>1
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>1
All of the following jQuery code will work.
以下所有 jQuery 代码都可以使用。
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
