JQuery Click函数随机停止工作

JQuery Click Function Randomly Stops Working

本文关键字：停止工作 随机 函数 Click JQuery      更新时间：2023-09-26

当用户单击排序图标时，我正在按名字对用户列表进行排序。然而，我注意到，有时当我单击排序图标时，图标会切换，但数据不会排序。例如，我点击它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');
         }
     });

假设if块和else块中的下一行是相同的吗？

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

像这样尝试

$('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>

请尝试以下代码：

$('#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();
 });

我更改了代码以查看隐藏字段是否为null。然后，我根据这个决定做了一个决定。下面是新的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();
         });
相关文章：