Предупреждение не срабатывает в пределах функции изменения

Question

Мое предупреждение здесь не срабатывает.

$('.filters-select').on('change', function() { 
var $this = $(this); 
var $buttonGroup = $this('.filters-select'); 
alert('test'); 
var filterGroup = $buttonGroup.attr('data-filter-group'); 
filters[filterGroup] = $this.attr('data-filter'); 
var filterValue = concatValues(filters); 
$container.isotope({filter:filterValue}); 
}); 

Хотя это действительно работает, когда оно помещено в первую очередь в функцию.

$('.filters-select').on('change', function() { 
alert('test'); 
var $this = $(this); 
var $buttonGroup = $this('.filters-select'); 
var filterGroup = $buttonGroup.attr('data-filter-group'); 
filters[filterGroup] = $this.attr('data-filter'); 
var filterValue = concatValues(filters); 
$container.isotope({filter:filterValue}); 
}); 

Вот HTML:

<select class="filters-select" data-filter-group="market"> 
    <option value="*">Select a Market Category</option> 
    <option value=".industrial" data-filter=".industrial">Industrial</option> 
    <option value=".commercial" data-filter=".commercial">Commercial</option> 
    <option value=".government" data-filter=".government">Government</option> 
</select> 

Answer 1

Этот код: $this('.filters-select'); не действует, так что браузер не будет оповещать все, что приходит после него. Он думает, что $this пытается быть методом, которого, очевидно, нет.

В вашем change случае, $(this) собирается вернуть select, а не выбранный option.

Я уверен, что это то, что вы хотите.

$('.filters-select').on('change', function() { 
    alert('test'); 
    var filterGroup = $(this).attr('data-filter-group'); 
    filters[filterGroup] = $(this).find(":selected").attr('data-filter'); 
    var filterValue = concatValues(filters); 
    $container.isotope({ 
    filter: filterValue 
    }); 
}); 

Answer 2

Причина, ваш первый блок кода не огонь, потому что эта линия не действительны JS:

var $buttonGroup = $this('.filters-select'); 

Второй блок разбивается тоже на этой линии, это именно так происходит, вы переехали alert над ним.

Я не уверен, чего вы пытаетесь достичь с помощью $this('.filters-select');, но я бы решил удалить его и переосмыслить вашу стратегию с ним. Для дальнейшего использования консоль разработчиков в вашем браузере может стать вашим лучшим другом при разработке.

Answer 3

Если вы используете JQuery, вам необходимо позвонить $ (document) .ready(), чтобы начать код.

$(document).ready(function(){ 
    $('.filters-select').change(function() { 
     alert('Teste'); 
    }); 
});