Javascript 如何仅选择一个附加元素的输入值

我想建立一个投票系统。每当用户用标题和两个可能的选项填写表单时，数据都会使用ajax附加到页面上的div元素。使用单选按钮，当用户单击两个可能的投票选项之一（一个输入值为0，另一个输入值为1）时，我想将值（0或1）发送到php文件，然后将其插入数据库

以下是我单击输入字段时发生的情况： HTML:

---

我希望只返回一个值，但是当有多个轮询时，值0或1会返回多次

你所做的正是我在上面评论中所描述的。每次单击该按钮时，您都会在页面上扫描该页面上的每个输入按钮，并在每个按钮上附加一个新的单击处理程序（已经有单击处理程序的按钮在每次传递时都会得到另一个重复的处理程序）。例如，在向页面添加3个表单后，第一组收音机已经连接了3次单击事件，这就是为什么除了添加的最后一组单选按钮外，每一组单选按钮都会收到多个警报

修复方法是只将click事件附加到正在添加的两个新单选按钮，即尚未附加click处理程序的按钮。所以你必须像我下面所做的那样确定选择器的范围

以下是我更改的代码的重要部分：

let newHtml = "<div>...radio buttons...</div>"; //removed for brevity
/*
  use "appendTo()" instead of "append()"
    appendTo() returns the newly appended element which is what we want for this
    append() returns the container the new element was appended to (not what we want here)
*/
let appended = $(newHtml).appendTo("#display-polls-container");

//then attach the click handler ONLY to the radio buttons
//found within the newly appended element
$(appended).find("input:radio").click(function() {
    alert($(this).val())
});

let newHtml=“…单选按钮…”//为简洁起见，请删除
/*
使用“appendTo（）”而不是“append（）”
appendTo（）返回新附加的元素，这就是我们想要的
append（）返回新元素所附加到的容器（这里不是我们想要的）
*/
let added=$（newHtml）.appendTo（#显示轮询容器）；
//然后仅将单击处理程序附加到单选按钮
//在新添加的元素中找到
$（追加）。查找（“输入：收音机”）。单击（函数（）{
警报（$（this.val（））
});

这里有一个有效的例子

---

是否尝试使用apply（）或call（）函数？试试这个：如何将数据发送到PHP文件？您是在收集数据并发送AJAX调用，还是在提交表单？如果你一直在整个表单中添加表单元素并提交表单，它会随着时间的推移而复制。你是在按顺序循环辩论吗？@Juke我会先检查这些函数的。现在，您已经告诉我们如何应用单击处理程序。但这只适用于执行页面时页面上的现有输入。因此，每次追加另一个输入时，您可能正在执行该代码。对吗？因为如果您没有执行该代码，那么新添加的输入是如何连接起来以响应单击的？我仍然认为你没有提供足够的代码。jsfiddle.net是您的朋友。

$("#user-created-poll").click(function() {

  $(".display-polls-container").append("<div class='poll-container'><form><div class='title'><p class='user'>Username</p><p class='title-text'>Poll title</p></div><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='0'>First option</div></label><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='1'>Second item</div></label></form></div>");


  $("input:radio").click(function() {

    var value = $(this).val();
    alert(value);

  });
});
//How do I make it so that when I click on one of the inputs, it only gives the value of the input that I'm clicking and not the value of all the inputs?

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  position: absolute;
  top: 0;
  right: 2%;
  width: 25%;
  height: 10%;
}

.poll-container {
  border-style: solid;
}

let newHtml = "<div>...radio buttons...</div>"; //removed for brevity
/*
  use "appendTo()" instead of "append()"
    appendTo() returns the newly appended element which is what we want for this
    append() returns the container the new element was appended to (not what we want here)
*/
let appended = $(newHtml).appendTo("#display-polls-container");

//then attach the click handler ONLY to the radio buttons
//found within the newly appended element
$(appended).find("input:radio").click(function() {
    alert($(this).val())
});