элементы формы и on('change')

[Юрай]

Есть форма, подгружается ajax'ом, в форме есть инпуты text, select и checkbox. Код

$(document).on('change','.class form',function(){
            $(this).parents('.parentClass').addClass('changed')
        });

<div class ="parentClass">
              <form class = "form">
                     <input type = 'text'>
                     <input type = 'text'>
                     <select>
                          <ul>
                            <li>1</li>
                            <li>2</li>
                          </ul>
......

ну в общем такая-вот стандартная структура... наверное...

Проблема в том что код работает со всем кроме select'а, но в выборку он попадает Версия JQ 1.7.1
Спасибо за ответы.

[mullih]

если хотите с элементами формы работать как написали в заголовке и что не соответствует приведенному html (если я не ошибаюсь элементами формы считаются те у кого есть атрибут name), можно сделать такой селектор

$('form.form [name]').on('change', function () {
	$(this).addClass('changed')
});

[danik.js]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).on('change','.parentClass form',function(){
            alert('changed'); return;
            $(this).parents('.parentClass').addClass('changed')
        });
</script>


<div class ="parentClass">
              <form class = "form">
                     <input type = 'text'>
                     <input type = 'text'>
                     <select>
                        <option>Bla bla</option>
                        <option>Option</option>
                     </select>
              </form>
</div>

[Юрай]

Спасибо, что уделили моей проблеме время.
Но не в выборке дело((Прошу прощения что сразу все не описал. Сейчас набросаю как обвернут селект внутри формы, может в этом проблема.

<div class = "section" >
   <dt id = 'category-label' class ='category-label' >
     <label for='category-label' class = 'optional'>
   </dt>
   <dd id = 'category-element' class ='category-element'>
      <div class="custom-select done">
        <span class="custom-text" style="width: 173px;">11111</span>
         <div class="select-list custom-scroll" style="display: none;">
             <ul>
                 <li class="selected" data-value="1">11111</li>
                 <li class="" data-value="2">22222</li>
             </ul>
         </div>
<select name="category" id="category">
    <option value="1" label="1">11111</option>
    <option value="2" label="2">22222</option>
</select></div>
   </dd>

</div>

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

$(document).on('change', '#category', function(){
            alert('It WORKS')});

, то все равно скрипт не работает, с другими инпутами все нормально.

[danik.js]

<div class = "section" >
   <dt id = 'category-label' class ='category-label' >
     <label for='category-label' class = 'optional'>
   </dt>
   <dd id = 'category-element' class ='category-element'>
      <div class="custom-select done">
        <span class="custom-text" style="width: 173px;">11111</span>
         <div class="select-list custom-scroll" style="display: none;">
             <ul>
                 <li class="selected" data-value="1">11111</li>
                 <li class="" data-value="2">22222</li>
             </ul>
         </div>
<select name="category" id="category">
    <option value="1" label="1">11111</option>
    <option value="2" label="2">22222</option>
</select></div>
   </dd>
 
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).on('change', '#category', function(){
            alert('It WORKS')});
</script>

Работает же)

А уж не самодельный ли выпадающий список у вас используется? Часто настоящий скрывают в силу убогости внешнего вида и невозможности использовать css, и подменяют рукодельным, но стилизуемым. Если так, то он не доработан. Обычно при изменении значения это изменение тут же передают в нативный селект. И/или триггерят на нем событие change.

[ksa]

так вот, это подгружается динамически, внутри формы

Т.е. несколько элементов с id="category"...

[Юрай]

Т.е. несколько элементов с id="category"...

да, может быть несколько, но я пока только с 1м играюсь.

[ksa]

может быть несколько

Тогда забудь про ИД. Его у тебя просто нет...

[Юрай]

<div class = "section" >
   <dt id = 'category-label' class ='category-label' >
     <label for='category-label' class = 'optional'>
   </dt>
   <dd id = 'category-element' class ='category-element'>
      <div class="custom-select done">
        <span class="custom-text" style="width: 173px;">11111</span>
         <div class="select-list custom-scroll" style="display: none;">
             <ul>
                 <li class="selected" data-value="1">11111</li>
                 <li class="" data-value="2">22222</li>
             </ul>
         </div>
<select name="category" id="category">
    <option value="1" label="1">11111</option>
    <option value="2" label="2">22222</option>
</select></div>
   </dd>
 
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).on('change', '#category', function(){
            alert('It WORKS')});
</script>

Действительно файерится(( блин...
Как писал Макконнелл, если вы не знаете как оно работает, то скорее всего оно не работет вовсе)) Наверное это тот случай)

Спасибо, еще раз.