jQuery removeClass 触发，但不删除类答案

【问题标题】：jQuery removeClass triggering, but not removing classjQuery removeClass 触发，但不删除类
【发布时间】：2019-04-16 11:42:55
【问题描述】：

我正在为表单中的某些文本输入使用日期选择器脚本。该表单位于由表格中的按钮触发的模式中。我在使用导出到 csv 脚本时遇到问题，日期选择器出现在我的 csv 中并破坏了内容。

所以我想，最简单的解决方案是在导出时删除 datepicker 类，但这不起作用。

我已在 jQuery 代码中添加了一个警报，以确保其均匀触发。果然是。由于某种原因，它不会删除该类。关于如何修复 removeClass 的任何建议，或者更好的是，如何确保日期选择器没有出现在我的 csv 中。

这是表单所在的模态：

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog controls" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title bold" id="controlsModalLabel">Edit Entry</h4>
      </div>
      <div class="modal-body">
        <h3 class="center">You are about to edit entry for</h3><br/>
        <h3 class="alert login"></h3>
        <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
          <input id="_csrf" type="text" name="_csrf" hidden="hidden"/>
          <input class="la_id form-control" type="hidden" name="la_id"/>
          <label class="bold">Start date:</label>
          <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>
          <label class="bold">End date:</label>
          <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>
          <label class="bold">SIM link:</label>
          <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required"/><br/>
          <label class="bold">Notes:</label>
          <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
          <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

jquery 代码：

$('#export').on('click', function(){
  $('.date').removeClass('datepicker');
});

表格导出到 csv 脚本：

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tbody tr,table thead tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td,th");

        for (var j = 2; j < cols.length; j++) 
            row.push(cols[j].innerText.trim());

        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename+(new Date().getTime())+".csv");
}

【问题讨论】：

你确定 $('.date') 对象存在吗？试试 console.log( $('.date').length+' '+$('.date').val() );
我正在测试一些东西，将日期类从输入中删除了一分钟，并忘记在发布之前将它们放回原处。是的，它存在并应用于 start_date 和 end_date 输入。我做了你提到的console.log，它返回2。
如果您要销毁 datepicker 对象会不会更容易？ $( '.date' ).datepicker( 'destroy' );
它在顶部。如果有帮助，我可以发布整个页面。不过我可以向你保证它就在那里。
您能否发布完整代码或代码的简化版本来演示您的错误，以便我们轻松调试而不是猜测错误可能在哪里。

标签： javascript jquery html

【解决方案1】：

似乎日期选择器使用<table> 标记（jQuery UI datepicker 这样做）。您可以简单地将 ID 或类添加到 CSV 表 并修改导出到 CSV 代码以仅针对该表的内容，而不是尝试隐藏日期选择器：

<table id="csv-table" class="csv-table">

var rows = document.querySelectorAll("table#csv-table tbody tr, table#csv-table thead tr");
// or
var rows = document.querySelectorAll("table.csv-table tbody tr, table.csv-table thead tr");

请注意，从元素中隐藏或删除类不会使其“消失”。

【讨论】：

【解决方案2】：

我简化了您的示例（即...没有模式和没有 CSV）为您提供 removeClass jQuery 调用的工作示例。您没有删除类的原因是您必须等待 DOM 就绪事件，然后才能连接 click 事件。在我发布的示例代码中，您会注意到您的 click 版本和带有 document.ready 连线的版本。您拥有的版本无法删除该类，但 DOM 就绪版本可以。希望这会有所帮助。

<style>
    .date {
        background-color: purple;
    }

    .datepicker {
        background-color: blue;
    }

</style>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>

    //$(document).ready(function () {
    //    $('#export').on('click', function () {
    //        $('.date').removeClass('datepicker');
    //    });
    //});


    $('#export').on('click', function () {
        $('.date').removeClass('datepicker');
    });

</script>

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <button id="export" name="export">Export</button>

    <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
        <input id="_csrf" type="text" name="_csrf" hidden="hidden" />
        <input class="la_id form-control" type="hidden" name="la_id" />
        <label class="bold">Start date:</label>
        <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required" /><br />
        <label class="bold">End date:</label>
        <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date" /><br />
        <label class="bold">SIM link:</label>
        <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required" /><br />
        <label class="bold">Notes:</label>
        <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
        <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
        </div>
    </form>
</div>

【讨论】：

【解决方案3】：

导出按钮 jquery 事件应该像下面给出的代码：-

$(document).ready(function () {
   $('#export').on('click', function () {
       $('.date').removeClass('datepicker');
   });
});

这肯定会删除该类。但如果不起作用，请尝试使用此库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

【解决方案4】：

我不确定您使用的是哪个日期选择器。但是 datepicker 插件可能以某种方式附加缓存中的输入可能会调用 datepicker。然后，您可以noop 其功能如下：

var exported = false;
$('#export').on('click', function(){
  exported = true
});

$('.datepicker').on('click', function() {
  if(exported) return $.noop();
  }
}

【讨论】：

【解决方案5】：

以下是使用 jQuery 的方法。我已经缩小了你的问题范围以保持答案简单。

$(document).ready(function () {
   $('#export').on('click', function () {
       $('.date').removeClass('datepicker');
   });
});

.datepicker {
 background: #1884c3;
 padding: 5px 2px;
}

.date {
  color: #ce8177;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="export" name="export-button">Export</button><br/>

<label class="bold">Start date:</label>
<input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>

<label class="bold">End date:</label>
<input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>

【讨论】：

【解决方案6】：

我不知道您使用的是哪个日期（时间）选择器。但我很确定问题在于插件创建了多个元素 - 因此仅删除类属性不足以摆脱所有元素。

看看这里：

How do I *completely* remove a jQuery UI datepicker?

【讨论】：