Question

我试图在不使用onclick的情况下获取HTML输入的元素id（或数据属性）。我的代码：

<button class="button primary" type="button" onclick="add_poll_answers(30)">Submit</button><br />

这是我的jQuery函数：

function add_poll_answers(id)
{
    var answers = [];
    var i = '0';
    $('input[id^="new-answer-'+id+'"]').each(function() {
        answers[i] = $(this).val();
        ++i;
    });
    $.post("index.php?module=actions&action=edit_poll&process=add",
    {
    pollid: id,
    answer: answers,
},
function(data, status)
{
    if (data != '')
        alert(data);
        else
            $("#ajax_add_"+id).slideDown();
    });
}

我需要的是一些删除onclick并将其添加到单独的jQuery文件的方法。我不能只使用以下内容，因为每页有多个轮询，ID会发生冲突。我真正需要的是一种方法，让你点击下面的东西，然后jQuery可以动态获取轮询的id的元素的数据属性。换句话说，我希望javascript获取id，而无需使用onclick传递它。

有没有人知道如何实现这一目标？

$(document).ready(function(){
    $("#edit_poll").click(function()
    {
       edit_poll();
    });

（id edit_poll不存在，这只是理论上的）

我找不到任何与我自己的问题相关的内容，而且我对此非常困惑。我开始时对AJAX很新，但这真让我感到困惑。我知道有办法做到这一点，但我找不到它。

Answer 1

$(document).ready(function(){
    $("#edit_poll").click(function()
    {
       var id=$(this).data("pollid");
       add_poll_answers(id);
    });
});

您的元素具有data-pollid属性

Answer 2

创建一个包含此信息的按钮。

<button class="button primary addAnswer" type="button" data-pollid="30">Submit</button>

然后简单地使所有按钮（或只使用类选择一些按钮）触发一个将查找ID的函数。

$(document).ready(function(){
    $("button.addAnswer").click(function () {
        add_poll_answers($(this).data("pollid"));
    });
});

Answer 3

您需要某种方法来识别您要处理的按钮，然后您可以：

直接挂钩click：

$("button").on("click", function() {
    // Use `this` here to access the element, e.g.
    // its ID is `this.id`, or you can access a
    // data attribute via `$(this).attr("data-foo")`
    // or this.getAttribute("data-foo")
});

在容器元素上挂钩click并告诉jQuery仅在其中一个按钮上发生点击时通知您，这看起来非常相似：

$("selector for the container").on("click", "button", function() {
    // Use `this` here to access the element, e.g.
    // its ID is `this.id`, or you can access a
    // data attribute via `$(this).attr("data-foo")`
    // or this.getAttribute("data-foo")
});

这称为事件委派，在您即时添加/删除按钮的情况下非常方便。

在上面，我刚刚使用"button"作为按钮的选择器，但当然你会想要更具体的东西 - 例如，你可以在有问题的按钮上添加一个类，请改用".the-class"。

＃1的示例（直接处理点击）：

$(".poll").on("click", function() {
  $("<p>")
    .html("You clicked " + $(this).attr("data-value"))
    .appendTo(document.body);
});

<div>
  <button type="button" class="poll" data-value="1">Choose 1</button>
  <button type="button" class="poll" data-value="2">Choose 2</button>
  <button type="button" class="poll" data-value="3">Choose 3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＃2的示例（使用事件委托）：

$("#container").on("click", ".poll", function() {
  $("<p>")
    .html("You clicked " + $(this).attr("data-value"))
    .appendTo(document.body);
});

<div id="container">
  <button type="button" class="poll" data-value="1">Choose 1</button>
  <button type="button" class="poll" data-value="2">Choose 2</button>
  <button type="button" class="poll" data-value="3">Choose 3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：如果您无法控制页面上脚本标记的位置，则只需使用ready。如果您这样做，只需将包含代码的脚本标记放在页面末尾，就在结束</body>标记之前。

Answer 4

如果您需要更多元素来应用相同的元素，只需使用class属性来标识元素：

<button class="buttonClick button primary" type="button">Submit</button>

然后，用jQuery处理事件：

$(document).ready(function(){
    $(".buttonClick").click(function(){
       console.log($(this).attr('id')); //to get the id, class or whatever
    });
});

Answer 5

Public class Country{
  private String name;
  private List<State> states;
}

Public class State{
  private String name;
  private List<City> cities
}

Public class City{
  private String name;
  private List<Town> towns
}

public class Town{
  private String name;
  private Integer population;
}

这就是我如何欺骗厄运和

jQuery在不使用onclick的情况下获取元素

5 个答案: