jquery在点击时从html属性中提取数据答案

【问题标题】：jquery pull data from html attribute on clickjquery在点击时从html属性中提取数据
【发布时间】：2013-06-14 16:28:00
【问题描述】：

当我有多个按钮可以点击相同的“id”时，我正在尝试创建一种从自定义 HTML 属性中提取信息的简单方法。

我想知道我是否可以通过我按下的特定按钮传递“url”属性值。现在，它总是只抓住第一个......

代码：

<script>
$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($("input[url]").attr("url"));
    });
});
</script>

<table id='alarms'>
    <th>ID</th>
    <th>CaseID</th>
    <th>Alarm</th>

    <tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2042"></td>
    </tr>
</table>

【问题讨论】：

标签： jquery custom-attributes

【解决方案1】：

使用this（不要使用重复的ID）

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url"));
    });
});

【讨论】：

啊！谢谢你们。只是那些从你脑海中掠过的肮脏简单的事情之一。我可以标记这个“#brainfart”吗？ :)

【解决方案2】：

在使用带有 data-* 的自定义 HTML 属性前缀时，在您的处理程序中，这引用了元素本身，因此只需使用 $(this).data("url") 访问它

 $(":input[id='alarm']").click(function() {
        alert($(this).data("url"));
    });

不要使用重复的 id，这会使您的 HTML 无效，并且您的处理程序将仅附加到第一个实例，因此请将其更改为 class。

标记

<tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2042"></td>
    </tr>

脚本

$(":input.alarm").click(function() {
        alert($(this).data("url"));
});

Demo

【讨论】：

【解决方案3】：

只需简单地将代码更改为：

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url")); //or
        alert($(this).prop("url"));
    });
});

【讨论】：