Добавить прослушиватель для изменения содержимого диапазона

Question

У меня есть короткий фрагмент кода, который я бы хотел запускать каждый раз, когда выпадающий список, сделанный из ul (для целей CSS), меняет его значение.

<span class="persons">5 personer</span> 
<ul class="dropdown"> 
    <li><a href="#">5 personer</a></li> 
    <li><a href="#">6 personer</a></li> 
    <li class="goodprice"><a href="#">7 personer (mer prisvärt)</a></li> 
    <li><a href="#">8 personer</a></li> 
    <li class="goodprice"><a href="#">9 personer (mer prisvärt)</a></li> 
    <li><a href="#">10 personer</a></li> 
    <li class="goodprice"><a href="#">11 personer (mer prisvärt)</a></li> 
</ul> 

А вот мой JQuery:

var persons = $('.persons').text(); 

if (persons == "5 personer" || persons == "6 personer" || persons == "7 personer (mer prisvärt)") { 
    $('#boattype1').show(); 
    $('#boattype2').show(); 
    $('#boattype3').hide(); 
} else if (persons == "8 personer" || persons == "9 personer (mer prisvärt)") { 
    $('#boattype1').show(); 
    $('#boattype2').hide(); 
    $('#boattype3').show(); 
} 

Так что мне нужно это код JS, чтобы запускаться, как только вы выберите что-то новое из ul. Я попытался добавить такие вещи, как $('ul a').click(function() {}); и $('span').change(function() {}); без каких-либо результатов, поэтому мне очень нужна ваша помощь, чтобы решить эту, надеюсь, небольшую проблему.

Answer 1

пяди не имеет change событие изначально, но ничто не мешает вам вручную запуска, а затем какой-либо подписки на это событие будет пожар:

$(function(){ 
    $('.persons').change(function() { 
     console.log('span changed to ' + $(this).text()); 
    }); 

    $('ul li a').click(function(){ 
     $('.persons').text($(this).text()).trigger('change'); 
    }); 
}); 

Живой пример: http://jsfiddle.net/djB83/