jQuery 不使用 onclick 获取元素

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>

然后简单地让所有按钮（或 select 只是一些使用 class 的按钮）触发一个查找 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")
});

在 container 元素上挂钩 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")
});

这称为事件委托，在需要adding/removing 按钮的情况下它非常方便。

在上面，我只是使用 "button" 作为按钮的选择器，但当然你会想要更具体的东西——例如，你可以添加一个 class到有问题的按钮并改用 ".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

$(document).ready(function(){  
var a = document.querySelector(".theClasseYouWantToListen").textContent;
console.log(a)
    });

这就是我欺骗厄运的方式

jQuery 不使用 onclick 获取元素

jQuery get element without use of onclick

html

javascript

ajax

jquery

onclick