Javascript 动态创建按钮或向按钮发送数据

我正在动态地尝试将从for循环获得的数据传递给按钮。我使用django获取for循环中的数据，使用html制作按钮，使用jquery传递数据。我不确定这是不是最好的描述

我的代码是：

{% for dogs in Dogs.Other %}
    <form id="primaryDogForm" action="{% url 'personal:account:email_dog_confirm' %}" method="post">
        {% csrf_token %}
        <input type="hidden" id="dogId" name="dogId" value="{{ dogs }}">
        <input type="button" value="Make this your primary dog" id="makePrimaryButton" class="btn btn-primary" data-toggle="modal" data-target="#makePrimary" />
    </form>
{% endfor %}

我面临的问题是，假设我有一个三条狗的列表，每个狗都有一个“让这是你的主要狗”按钮，那么这个按钮只对第一条狗有效。其余的按钮在第一个按钮被点击之前不起作用。 单击第一个按钮后，所有其他按钮也会获得第一个狗的值。因此，列表中的狗2和狗3不能成为主要狗

我很确定问题出在我的html和jquery上。有没有一种方法可以让按钮变得动态，这样按钮就可以得到它所关联的狗的值？这样，任何一只狗都可以成为主要的狗

---

非常感谢你

这里的问题在于您在for循环的初始HTML上放置的ID。ID在HTML中是唯一的-在一个页面上应该只有一个ID名称。这也是为什么jquery选择器只正确地选择第一个按钮

相反，解决此问题的一种方法是使用类而不是ID，如下所示：

{% for dogs in Dogs.Other %}
  <form class="primaryDogForm" action="{% url 'personal:account:email_dog_confirm' %}" method="post">
      {% csrf_token %}
      <input type="hidden" class="dogId" name="dogId" value="{{ dogs }}">
      <input type="button" value="Make this your primary dog" class="btn btn-primary makePrimaryButton" data-toggle="modal" data-target="#makePrimary" />
  </form>
{% endfor %}

请注意，因为您已经为模式定义了一个click事件，在您单击的dog按钮之外，需要跟踪最后单击的dog按钮，以便在确认模式时进行跟踪

在两个click处理程序之外使用一个变量只是处理这个问题的一种方法，而且可能不是最好的方法。另一种方法是在单击初始dog按钮后定义一个临时事件处理程序，但这也需要确保在模式被取消时事件得到正确清理

--编辑解释临时事件处理程序--

为了在每次狗狗按钮点击时创建临时事件处理程序，您还需要确保每次删除临时处理程序（无论发生什么）。在这种情况下，因为您使用的是引导模式，所以我们可以使用模式上的close事件来最终清除事件处理程序

javascript如下所示：

$('.makePrimaryButton').click(function() {
  // note we're still placing the form in a variable here
  // so we have easy reference to it in the temporary event
  // handler below
  var currentForm = $(this).closest('form');
  var dogId = currentForm.find('.dogId').val();
  $('#newDog').text(dogId);

  $('#makePrimaryButton').one('click', function(){
    currentForm.submit();
  })
});

// hidden.bs.modal is for Bootstrap v3 or v4. If you're using
// Bootstrap v2 it's just 'hidden.'
$('#makePrimary').on('hidden.bs.modal', function(){
  // clears absolutely all event handlers on the button,
  // not just the ones we set. We would need a reference to
  // the function we set earlier in order to take just
  // that function off.
  $('#makePrimaryButton').off();
})

---

您应该向按钮添加数据属性。下面的链接提供了一个很好的实施示例：

---

非常感谢您的回答。请您详细说明我如何完成“另一种方法是在单击初始dog按钮后定义临时事件处理程序-但这也需要确保在模态被取消时事件得到正确清理。”@DeekshaJuneja我更新了我的答案，并提供了有关临时事件处理程序的详细信息。请注意位于底部的事件处理程序，一旦完成模式（无论是提交还是取消），它将执行操作。这确保了无论用户选择什么选项，事件处理程序都已被删除。因此，基本上，我不需要使用

$（'#makePrimarySubmit'）。单击（function（）{$（'#primaryDogForm'）.submit（）；}）？但是，当我试图在用户单击makePrimarySubmit之前推迟提交时，这会不会将我的提交与makePrimaryButton关联起来？@DeekshaJuneja正确，您不再需要您在评论中输入的片段。我的示例按照您的意愿工作，因为一旦您单击Dog按钮打开表单，此时它会在#makePrimarySubmit按钮上设置一个处理程序，以便用户单击的Dog表单将在单击#makePrimarySubmit后调用.submit（）。这将仅在点击模式提交按钮后提交狗表单。这能澄清一切吗？是的，这是有道理的。然而，我确实尝试过这样做，它使我的提交按钮在模式中什么也不做。因此，提交操作基本上不起作用。因此，我只使用了
$（'.makePrimarySubmit'）根据您的简单建议，这样做似乎很有效。非常感谢你的帮助！！！
{% for dogs in Dogs.Other %}
  <form class="primaryDogForm" action="{% url 'personal:account:email_dog_confirm' %}" method="post">
      {% csrf_token %}
      <input type="hidden" class="dogId" name="dogId" value="{{ dogs }}">
      <input type="button" value="Make this your primary dog" class="btn btn-primary makePrimaryButton" data-toggle="modal" data-target="#makePrimary" />
  </form>
{% endfor %}

var lastEditedForm = null;

$('.makePrimaryButton').click(function() {
  lastEditedForm = $(this).closest('form');
  var dogId = lastEditedForm.find('.dogId').val();
  $('#newDog').text(dogId);
});

$('#makePrimarySubmit').click(function(){
  lastEditedForm.submit();
});

$('.makePrimaryButton').click(function() {
  // note we're still placing the form in a variable here
  // so we have easy reference to it in the temporary event
  // handler below
  var currentForm = $(this).closest('form');
  var dogId = currentForm.find('.dogId').val();
  $('#newDog').text(dogId);

  $('#makePrimaryButton').one('click', function(){
    currentForm.submit();
  })
});

// hidden.bs.modal is for Bootstrap v3 or v4. If you're using
// Bootstrap v2 it's just 'hidden.'
$('#makePrimary').on('hidden.bs.modal', function(){
  // clears absolutely all event handlers on the button,
  // not just the ones we set. We would need a reference to
  // the function we set earlier in order to take just
  // that function off.
  $('#makePrimaryButton').off();
})