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

Question

我正在动态尝试将从 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 %}

基本上，人们可以将狗列表添加到他们的帐户中，然后选择一只狗作为他们的主要狗。我希望在单击按钮时调用模式。并且该模态应该显示可能成为主要狗的狗的名称。 模态代码如下：

<div class="modal fade" id="makePrimary" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Make Primary</h4>
                </div>
                <div class="modal-body">
                    <p>
                            You are about to make <span id="newDog" name="newDog"></span> your primary dog.
                        </p>
                        <hr>
                    <a href="#" id="makePrimarySubmit" class="btn btn-primary">Submit</a>
                </div>
            </div>
        </div>
    </div>

让一切正常工作的 jquery 是：

$('#makePrimaryButton').click(function() {
            ($('#newDog').text($('#dogId').val()));
 });

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

我面临的问题是，假设我有一个包含三只狗的列表，每只狗都有一个“将其设为您的主要狗”按钮，那么该按钮仅适用于第一只狗。在单击第一个按钮之前，其余按钮不起作用。 单击第一个按钮后，所有其他按钮也将获得第一只狗的值。因此，列表中的狗 2 和狗 3 不能成为主要狗。

我很确定问题出在我的 html 和 jquery 上。有没有办法让按钮动态化，以便按钮获得与其关联的狗的值？这样，任何狗都可以成为主要狗。

非常感谢。

Answer 1

这里的问题在于您在 for 循环中的初始 HTML 上放置的 ID。 ID 在 HTML 中是唯一的 - 您应该在页面上只拥有一个具有该 ID 名称的 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 %}

然后您需要更新您的 jquery 代码以反映此更改：

var lastEditedForm = null;

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

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

请注意，由于您在单击了哪个狗按钮之外定义了模态的单击事件 - 当确认模态时，需要跟踪最后单击的哪个狗按钮。

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

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

为了在每次点击狗按钮时创建一个临时事件处理程序，您还需要确保每次都删除临时处理程序（无论如何）。在这种情况下，由于您使用的是引导模式，我们可以使用模式上的关闭事件来明确清除事件处理程序。

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();
})

Answer 2

您应该为按钮添加一个数据属性。下面的链接给出了一个很好的实现示例：

Passing data to a bootstrap modal