为什么即使使用独特的类，一个按钮也会覆盖我的另一个按钮？

当我点击清除时，它也将作为重置而不是清除行。您的重置侦听器声明为$('#reset [type="button"]').on('click', function(e) {  ...})该#reset元素似乎同时包含清除按钮和重置按钮，因此单击其中任何一个都将恢复初始值。清除按钮也有自己的两个处理程序。在代码中声明了一个，它又声明了一个函数（不在处理程序本身中调用）和一个试图调用所述函数的内联处理程序。那不应该起作用，因为它在全局范围内是不可见的。代替$(button).on('click',(e)=>{  function doSomethingWith(i) {   ...  }  doSomethingWith(e.target.id);})如果应该function doSomethingWith(i) {   ...}$(document).ready(function(){   $(button).on('click',(e)=>{     doSomethingWith(e.target.id);   });});那么它将对处理程序可见，而且在全局范围内也是可见的，因此您可以使用内联“onclick”调用它 <button onclick="doSomethingWith({{ forloop.counter }})" >但是，如果您还在 JS 中声明了一个内联处理程序，那么您不应该有一个内联处理程序。由于您正在处理代码中的重置按钮，因此对于清除按钮也坚持这种方法。现在，您用来清除行的方法需要您知道行的相对索引，以及每行的输入，您可以为它们计算各自的 ID。然而，在重置原始值时，您不需要知道任何事情：$('.reset_button').on('click', function(e) {  // reset current row............  $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {      // restore the initial value      ele.value = ele.dataset.initvalue;  })});该按钮只需要知道它与<tr>需要恢复其值的其他输入位于同一元素内。它不关心索引、ID，甚至不关心输入是什么，只要它们不是按钮即可。你应该做同样的事情来清除这些值：$('.clear_button').on('click', function(e) {  // reset current row............  $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {      ele.value =  "";  });});当谈到存储原始值时，我也习惯求助于 jQuery.data。无论如何，对于这个用例，你可以完全坚持input.dataset.initialValue = input.value代替$(input).data('initialValue',input.value)只要您牢记这些方法是不可互换的。您不能使用 dataset 设置 initialValue 然后使用 jQuery.data 或其他方式获取它。function randomTime() {  return [    Number(100 * Math.random() % 12).toFixed(0).padStart(2, '0'),    Number(100 * Math.random() % 60).toFixed(0).padStart(2, '0')  ].join(':');}function addFormRow(player_name = 'N/A') {  let tr = $('<tr class="form_row">'),    name = $('<input type="text" name="name" class="name">'),    start = $('<input type="time" name="start" class="start">'),    end = $('<input type="time" name="end" class="end">'),    advanced = $('<input type="number" name="advanced" class="advanced">'),    clear = $('<button class="clear_button">Clear</button>'),    reset = $('<button class="reset_button">Reset</button>');  name.val(player_name);  start.val(randomTime());  advanced.val(parseInt(Math.random() * 100, 10))  end.val(randomTime());  for (let input of [name, start, end, advanced, clear, reset]) {    $('<td>').append(input).appendTo(tr);   }  tr.appendTo('#forms tbody');}addFormRow('player one');addFormRow('player two');addFormRow('player three');$(document).ready(function() {  $('#forms tbody tr').each((index,tr)=>{    $(tr).find('input').each((idx,input)=>{       $(input).data('initialValue',$(input).val());    });  })  $(".clear_button").on('click', (e) => {    let $this = $(e.target),      tr = $this.closest('tr');    tr.find('input').each((index, input) => {      input.value = '';    });  });  $(".reset_button").on('click', (e) => {    let $this = $(e.target),      tr = $this.closest('tr');    tr.find('input').each((index, input) => {      $(input).val($(input).data('initialValue'));    });  });});.advanced {  width: 4em;}.name {  width: 9em;}.start,.end {  width: 5.5em;}.form_row input {  height: 1.1em;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="forms">  <thead>    <tr>      <th>name</th>      <th>start</th>      <th>end</th>      <th>advance</th>      <th colspan="2">actions</th>    </tr>  </thead>  <tbody>  </tbody></table>

为什么即使使用独特的类，一个按钮也会覆盖我的另一个按钮？

2回答