时间戳

首页 > 解决方案 > jquery函数没有注册更改

javascript - jquery函数没有注册更改

问题描述

我的 django 项目中有一个 jquery 脚本，它读取复选框，然后在单击时将它们提交给函数。我的问题是这仅在我重新加载页面时才有效。是否可以让 jquery 脚本一直“监听”复选框？

$(document).ready(function() {
  var vals = [];
  $.each($("input[name='checkb']:checked"), function() {
    vals.push($(this).attr('id'));
  });  
  console.log('calling function:', vals)
  
  $('.print').click(function() {
    console.log('print:', vals)
    $.get('eprint/ticked/', {
      marked: vals
    })
  })
  
  $('.delete').click(function() {
    console.log('delete:', vals)
    $.get('edelete/ticked/', {
      marked: vals
    })
  });
});

{% for l in object_list %}
  <tr>
    <td>
      <form>
        <label><input type="checkbox" id={{l.pk}} name="checkb"></label>
        <form>

标签： javascriptjquery

解决方案

实现您所需的一种方法是将change事件处理程序添加到复选框，以便您可以vals在用户选中或取消选中某个框时更新变量。

但是，我建议您只需创建一个函数，该函数在.print和.deleteclick 处理程序中需要它们的位置读取值。这避免了任何不必要的全局变量，并避免了在操作发生时准确读取 DOM 时维护数组的需要。尝试这个：

let getValues = () => $("input[name='checkb']:checked").map((i, el) => el.value.trim()).get();

$(document).ready(function() {
  $('.print').on('click', () => {
    $.get('eprint/ticked/', {
      marked: getValues()
    });
  });
  
  $('.delete').on('click', () => {
    $.get('edelete/ticked/', {
      marked: getValues()
    });
  });
});

推荐阅读