如何从HTML元素动态传递参数给JQuery点击事件

How to pass parameter dynamically to JQuery click event from HTML elements?

本文关键字：参数 JQuery 事件 HTML 元素 动态      更新时间：2023-09-26

首先，我必须提到我是JavaScript和JQuery世界的新手。我不确定我是否给我的问题取了一个合适的标题，但我会尽力解释我的问题。

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

  1. 我不知道如何以及在哪里包括HTML中的项目id。请注意，该列表只显示项目名称，而不显示id。
  2. 假设1)已解决，我如何将被单击的项目的id传递给AJAX调用。

这是项目列表的HTML。正如你所看到的，它说明了我的问题的第一部分。我不知道如何在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>

下面是发送AJAX调用的JQuery点击事件处理程序。getJSON)到服务器。请注意，问题的第2部分由var item_id = ??这行说明。注意弹出式是自定义的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

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

& lt;标签支持以下标准属性: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>

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

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

并通过:

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

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

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";
相关文章：