jQuery removeClass触发，但不删除类

问题描述 投票：3回答：6

我正在使用一个datepicker脚本来处理表单中的一些文本输入。表单位于由表格中的按钮触发的模态中。当我使用导出到csv脚本时，我遇到了问题，datepicker出现在我的csv中并且破坏了东西。

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

我已经在jQuery代码中添加了一个警报，以确保它甚至触发。果然是的。出于某种原因，它不会删除该类。有关如何修复removeClass的任何建议，或者更好的是，如何确保datepicker不会出现在我的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");
}
javascript jquery html
6个回答
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");

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

0
投票

我简化了您的示例（即...没有模态，没有CSV），为您提供了removeClass jQuery调用的工作示例。您没有获取要删除的类的原因是您必须等待DOM ready事件，然后再连接click事件。在我发布的示例代码中，您将注意到您的点击版本以及带有document.ready wireup的版本。您拥有的版本将不会删除该类，但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>
0
投票

导出按钮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>
0
投票

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

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

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

以下是使用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/>
0
投票

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

看看这里：

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.