爲什麼這個jQuery不能在一個地方工作？

我已經抽象了一些jQuery代碼來處理我的應用程序中的表格的過濾。通常，用戶點擊一個鏈接，某些表格行顯示或隱藏。代碼如下：爲什麼這個jQuery不能在一個地方工作？

var filters = $('ul.filters'); 
var filtersCount = filters.children().length; 
if (filtersCount > 2) { 
    filters.children(':last-child').css({ 
    'right':'1px' 
    }) 
} 
var target = filters.data('target'); 

$('a.filter').on('click', function() { 
    filters.children().removeClass('active'); 
    $('.filterable').hide(); 
    var $this = $(this); 
    $this.parents('li').addClass('active'); 
    var visibleStates = $this.data('include-filter').split(" "); 
    $(visibleStates).each(function(index,state) { 
    if (state == "all") { 
     $('.filterable').show(); 
    } else { 
     $('.filterable' + '.' + state).show(); 
    } 
    }) 
    if ($this.data('exclude-filter') !== undefined) { 
    var hiddenStates = $this.data('exclude-filter').split(" "); 
    $(hiddenStates).each(function(index,state) { 
     $('.filterable' + '.' + state).hide(); 
    }) 
    } 
})

此代碼是在我的應用程序五個地方使用，並在他們四人的作品。通過逐步執行，我知道代碼確實起作用，因爲它過濾了元素，但最終隱藏了頁面上的所有「.filterable」元素。我按照代碼的哪個進入jQuery的這部分的執行：

if (ret !== undefined) { 
    if ((event.result = ret) === false) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    } 
}

這導致要隱藏的「.filterable」行中的行是這樣的：

ret = ((jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler).apply(matched.elem, args);

最終，執行停止在這條線上：

return event.result;

event.result是未定義的，如果我在控制檯中查看它。 Javascript並不是我的專業領域，所以如果任何人都可以給我一個正確的方向，我將不勝感激。

編輯

我加入了可能是最簡單的代碼到我的表具有相同的結果如下。無論我點擊哪個過濾器鏈接，這兩行都是隱藏的，不會再出現。

<tbody> 
    <tr class="filterable paid-sick-leave"> 
    <td>From</td> 
    <td>To</td> 
    </tr> 
    <tr class="filterable paid-annual-leave"> 
    <td>From</td> 
    <td>To</td> 
    </tr> 
</tbody>

這些過濾器看起來像這樣。 Ruby代碼打印缺席類別的描述，將其縮小並用連字符替換空格。

<ul class="filters"> 
    <li class="active"> 
    <a href="javascript:;" class="filter" data-include-filter="all">All Absences</a> 
    </li> 
    <% @absence_categories.each do |ac| %> 
    <li> 
     <a href="javascript:;" class="filter" data-include-filter="<%= ac.description.downcase.gsub(' ','-') %>"><%= ac.description %></a> 
    </li> 
    <% end %> 
</ul>

來源

2017-09-04 Robin Fisher

您能不能告訴我們的標記？最後一個實例與前四個實例有什麼不同會導致其中斷？如果你有6張桌子，最後兩張桌子是否仍然壞掉？或者只是最後一個？你有沒有嘗試複製最後一張桌子並將其移到第一張桌子上？有很多方法可以檢查可能出錯的地方。 – Terry

您正在使用過濾器的錨點，它是否具有href屬性？ –

變化一樣低於這個單擊事件：

$(document).on('click','a.filter', function() { 
    filters.children().removeClass('active'); 
    $('.filterable').hide(); 
    var $this = $(this); 
    $this.parents('li').addClass('active'); 
    var visibleStates = $this.data('include-filter').split(" "); 
    $(visibleStates).each(function(index,state) { 
    if (state == "all") { 
     $('.filterable').show(); 
    } else { 
     $('.filterable' + '.' + state).show(); 
    } 
    }) 
    if ($this.data('exclude-filter') !== undefined) { 
    var hiddenStates = $this.data('exclude-filter').split(" "); 
    $(hiddenStates).each(function(index,state) { 
     $('.filterable' + '.' + state).hide(); 
    }) 
    } 
})

來源

2017-09-05 05:37:47

謝謝！所以我明白這是關於委託事件。但是當我在頁面中動態創建元素時，我通常會使用這些元素。我正在加載我的js後身體已呈現，所以我不明白爲什麼這將是一個問題在這裏。 –

它的意思是「event.result」是空你需要測試，如果你的事件仍然點擊或存在需要在控制檯腳本程序一步一步地調試後可引起不引用類此錯誤HTML。

來源

2017-09-04 21:08:59

爲什麼這個jQuery不能在一個地方工作？

回答

相關問題