jquery change не работает

Question

Когда [name="tip"] имеет первое значение, отобразите определенный элемент, иначе он отобразит другой элемент.

Оба элемента имеют свойство display:none. Когда я загружаю страницу, я проверяю значение выбора и автоматически затухает в нужном элементе.

Все работает нормально, за исключением случаев, когда я пытаюсь изменить выбранный вариант: ничего не происходит. Я добавил оба javascript onchange к этому пункту и jQuery .change(), и ничего не происходит. Можешь мне сказать почему?

<form id="fm-account-properties-tab" method="POST"> 
<table width="300px" style="margin-top:10px;" align="center" > 

    <tr> 

     <td align="left"> 
     <select class="easyui-combobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();"> 
        <option value="l1">l1</option> 
        <option value="l2">l2</option> 
        <script> 
         $(document).ready(function(){ 
          $('[name="tip"]').val('<?php echo $a['tip'];?>'); 
         }); 
        </script> 
     </select> 
     </td> 
    </tr> 
    <tr id="l1" style="display:none"> 

     <td align="left"> 
     <select class="easyui-combobox" name="l1" style="width:200px;" class="easyui-validatebox" required="true"> 

     </select> 
     </td> 
    </tr> 
    <tr id="l2" style="display:none"> 

     <td align="left"> 
     <select class="easyui-combobox" name="l2" style="width:200px;" class="easyui-validatebox"> 


     </select> 
     </td> 
    </tr> 
</table> 
</form> 

<script> 
function changeType() 
{ 

if($('[name="tip"]').val()=='l1') 
    { 
    $('#l1').fadeIn(); 
    $('#l2').hide(); 
    } 
else 
    { 
    $('#l2').fadeIn(); 
    $('#l1').hide(); 
    } 
} 



$(document).ready(function() { 

     changeType(); 

      $('[name="tip"]').change(function(){ alert('1');});//it never alerts me 
    }); 

Answer 1

использование .on для более новых версий JQuery (JQuery> 1.7.x reference)

function changeType() { 
    if ($('[name="tip"]').val() == '___') { 
     $('#1').fadeIn(); 
     $('#2').hide(); 
    } else { 
     $('#2').fadeIn(); 
     $('#1').hide(); 
    } 
} 

$(document).ready(function() { 
    changeType(); 
    $('select[name="tip"]').on('change', function() { 
     changeType(); 
    }); 
}); 

у вас есть атрибут двойного класса на ваш выбор.

здесь рабочий образец http://jsfiddle.net/tvhKH/

Answer 2

Может быть, вы должны использовать js error event, чтобы выяснить ошибку в этом коде. Например, <script> try {....all your codes here...} catch(err) {alert("THE ERRor" + err.message);} </script>. Этот код предупредит вашу ошибку и точную точку. Удачи!

Answer 3

Во-первых, вы должны попытаться добавить

console.log("It works"); 

или в

alert("It works") 

в вашем методе, чтобы вы знаете, если это actualy называется.

Тогда я думаю, что проблема может исходить от FadeIn() работает только с элементами css {display: none} и видимостью, отличной от «скрытой», так что вы уверены, что ваши элементы? При возникновении сомнений, вы можете заменить

.fadeIn(); 

по

.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none 

Тогда, пожалуйста, дайте мне знать, если у вас есть больше информации после делать это.