如何从 html 中检索 jQuery 值

Question

打开模态时，我使用 jQuery 赋值，以便它们可以在模型内部使用：

模态触发器：

<a data-toggle='modal' data-name='$nameCap' data-id='$id' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i></a>

main.js:

$(document).on("click", ".open-DeleteDialog", function () {
    var categoryId = $(this).data('id');
    var categoryName = $(this).data('name');
    $("#categoryId").val( categoryId );
    $('#deleteConfirmation').text("Are you sure you want to delete this category: " + categoryName + "?");
});

模态框内：

  <div class="modal-body">
    <div id="deleteConfirmation">
      <!-- Filled with confirmation from jquery -->
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <button id="saveChanges" type="button" class="btn btn-danger">Delete</button>
    <script>

      $(function() {

        $('#saveChanges').on('click', function() {
          var id = $( "#categoryId").val();
          console.log(id)
        });


      });
    </script>

我正在尝试取回#categoryId 值，但在记录它时 returns 未定义。我做错了什么？

Answer 1

您应该使用 hidden 类型添加 categoryId 元素，如下所示。

<input type="hidden" id="categoryId" />

$(document).on("click", ".open-DeleteDialog", function () {
    var categoryId = $(this).data('id');
    $("#categoryId").val(categoryId);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-toggle='modal' data-name='$nameCap' data-id='123' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>123</a>

<a data-toggle='modal' data-name='$nameCap' data-id='456' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>456</a>

<input type="hidden" id="categoryId" />
<hr/>

<div class="modal-body">
    <div id="deleteConfirmation">
      <!-- Filled with confirmation from jquery -->
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <button id="saveChanges" type="button" class="btn btn-danger">Delete</button>
    <script>
      $(function() {
        $('#saveChanges').on('click', function() {
          var id = $( "#categoryId").val();
          console.log(id)
        });
      });
    </script>

Answer 2

$(function(){
  var categoryId;
  $(document).on('click', '.open-DeleteDialog', function(e){
    categoryId = $(this).data('id');
  })

  $('#saveChanges').on('click', function(e){
    alert(categoryId);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-toggle='modal' data-name='$nameCap' data-id='123' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>123</a>

<a data-toggle='modal' data-name='$nameCap' data-id='456' class='open-DeleteDialog' href='#deleteDialog'><i class='fas fa-trash-alt'></i>456</a>

<button id="saveChanges" type="button" class="btn btn-danger">Delete</button>

为什么不创建全局变量而不是创建隐藏元素？

var categoryId;

$(document).on("click", ".open-DeleteDialog", function () {
    // initialize category id
    categoryId = $(this).data('id');
});

正在获取类别 ID 值

$('#saveChanges').on('click', function() {
      console.log(categoryId )
});

代码如下所示

$(function() {
    // global variable
    var categoryId;

    $(document).on("click", ".open-DeleteDialog", function () {
        // initialize category id
        categoryId = $(this).data('id');
    });

    $('#saveChanges').on('click', function() {
        console.log(categoryId )
    });
})

如何从 html 中检索 jQuery 值

How to retrieve jQuery values back from html

html

jquery

modal-dialog