Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   элементы формы и on('change') (https://javascript.ru/forum/jquery/35002-ehlementy-formy-i-%27change%27.html)

Юрай 27.01.2013 21:30

элементы формы и 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 27.01.2013 22:13

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

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

danik.js 27.01.2013 22:24

<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>

Юрай 28.01.2013 02:27

Спасибо, что уделили моей проблеме время.
Но не в выборке дело((Прошу прощения что сразу все не описал. Сейчас набросаю как обвернут селект внутри формы, может в этом проблема.
<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 28.01.2013 06:21

<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 28.01.2013 09:47

Цитата:

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

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

Юрай 28.01.2013 13:42

Цитата:

Сообщение от ksa (Сообщение 229862)
Т.е. несколько элементов с id="category"...

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

ksa 28.01.2013 13:56

Цитата:

Сообщение от Юрай
может быть несколько

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

Юрай 28.01.2013 13:57

Цитата:

Сообщение от danik.js (Сообщение 229838)
<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.

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

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


Часовой пояс GMT +3, время: 12:12.