jQuery Click 函数随机停止工作答案

【问题标题】：JQuery Click Function Randomly Stops WorkingjQuery Click 函数随机停止工作
【发布时间】：2016-02-16 06:30:32
【问题描述】：

当用户单击排序图标时，我正在按名字对用户列表进行排序。但是，我注意到有时单击排序图标时，图标会切换，但是数据没有排序。比如我点击了10次，可能有3次数据根本没有排序但是图标变了。如有任何帮助，我们将不胜感激。

部分 html 代码。

  <div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
<a href="#" data-action="POST"> First Name</a> 
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc"></i></a></div>

处理替换按钮和提交表单的函数。

  $('#sortName').on('click', function (e) {
         e.preventDefault();
         if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
             $('#searchVal').val('asc');
             $('form').submit();
             $(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
         } else {
             $('#searchVal').val('desc');
             var myVal = $('#searchVal').val();
             $('form').submit();
             $(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
         }
     });

【问题讨论】：

您确定页面真的在每次点击时重新加载。我猜想有时请求需要很长时间，当您单击排序时会触发另一个请求。
我也是这么想的，所以我等了 30 秒才再次点击。

标签： javascript jquery asp.net-mvc-5

【解决方案1】：

以下行在 if 块和 else 块中是否假设相同？

$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');

【讨论】：

我知道您在创建此答案时无法创建评论，并且我没有对此投反对票。但是一旦你会写cmets，那么你就不应该在答案部分添加这样的问题。
谢谢，我意识到并更新了代码。我在做 $('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc')，但我换成了 $(this).find()。将代码复制到 else 语句后忘记替换 desc。

【解决方案2】：

这样试试

$('a#sortName').on('click', function (e) {
    e.preventDefault();
    // Setting the current clicked icon into a variable.
    var findSortIcon = $(this).find('#sortIcon');
    if (findSortIcon.hasClass('fa-sort-alpha-desc')) {
        $('#searchVal').val('asc');
        //$('form').submit(); - We are sending the submit anytime whenever the button is 		clicked
        findSortIcon.removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
    } else {
        $('#searchVal').val('desc');
        //var myVal = $('#searchVal').val(); - no need for this (You dont use it anyway)
        // $('form').submit(); - same in here
        findSortIcon.removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
    }
    // Whether its true or false submit it!
    $('form').submit();
    
    
   	// Extra stuff to check changing directly
    var attr = findSortIcon.attr("class");
    $('#show-class').html(attr + " for " + $(this).text())
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
  <a href="#" data-action="POST"> First Name</a> 
  <a id="sortName" href="#" data-sort="SORT">
    <i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
      ICON
    </i>
  </a>
</div>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
  <a href="#" data-action="POST"> First Name2</a> 
  <a id="sortName" href="#" data-sort="SORT"> 
    <i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
      ICON2
    </i>
  </a>
</div>

<div id="show-class"></div>

【讨论】：

我试过你的代码，它也能正常工作。为什么创建变量的时候有效，不创建变量的时候无效？
这不是我在if() 中为$(this).find('#sortIcon') 在“那个”区域内搜索而检查的变量，您进行了像if($('#sortIcon'.....) 这样的检查，它将只检查第一个。您需要检查“点击”区域。

【解决方案3】：

试试这个代码：

$('#sortName').on('click', function (e) {
     e.preventDefault();
     if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
         $(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
         $('#searchVal').val('asc');
     } else {
         $(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
         $('#searchVal').val('desc');
     }
     $('form').submit();
 });

【讨论】：

因为你修改了这么多代码，你应该解释你修改了什么以及为什么它应该解决问题。

【解决方案4】：

我更改了代码以查看隐藏字段是否为空。然后，我根据这个决定做出了决定。新的 JQuery 代码如下，到目前为止运行良好。

 $('#sortName').on('click', function (e) {
             e.preventDefault();
             var testVal = $('#searchVal').val();
             if (testVal === 'desc') {
                 $('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
                 $('#searchVal').val('asc');
             } else {
                 $('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
                 $('#searchVal').val('desc');
             }
             $('form').submit();
         });

【讨论】：