奇怪的JavaScript問題

Question

我正在構建一個頁面，它是dinamically加載ajax。

這就是'$.get' jQuery函數調用（這是位於外部HTML頁面）：

<script type="text/javascript"> 
$(function() 
{ 
    $('button').sb_animateButton(); 
    $('input').sb_animateInput(); 
    $('#settings_security_error').hide(); 
}); 

function check_passwords(password, password_confirm) 
{ 
    $('#settings_security_error').show(); 
    alert('I\'m in funcion!'); // This works... 
    if(password.length < 4) // ... this doesn't 
    { 
     $('#settings_security_error').innerHTML = 'Password too short'; 
    } 
    else 
    { 
     password = hex_md5(password); 
     password_confirm = hex_md5(password_confirm); 
     $.get('/engine/ajax/check_password.php?password=' + password + '$password_confirm=' + password_confirm, 
       {language: "php", version: 5}, 
       function(result) 
       { 
        $('#settings_security_error').innerHTML = result; 
       }, 
       'html'); 
    } 
} 
</script> 

<div class="title">Security</div> 
<table class="sub_container"> 
<tr> 
    <td><label>Old password</label></td> 
    <td class="td_input"><input type="password" name="old_password"/></td> 
</tr> 
<tr> 
    <td><label>New password</label></td> 
    <td class="td_input"><input type="password" 
           name="new_password" 
           id="settings_security_new_password" 
           onkeyup="check_passwords(this.value, getElementById('settings_security_password_confirm').value)"/></td> 
</tr> 
<tr> 
    <td><label>Confirm password</label></td> 
    <td class="td_input"><input type="password" 
           name="new_password_confirm" 
           id="settings_security_password_confirm" 
           onkeyup="check_passwords(getElementById('settings_security_new_password').value, this.value)"/></td> 
</tr> 
<tr> 
    <td class="td_error" id="settings_security_error"></td> 
</tr> 
</table> 

而這正是外部HTML放置...：

<div id="settings_appearance"> 

</div> 

...從這個JavaScript片段：

function get_page_content(page, target_id) 
    { 
     $.get('engine/ajax/get_page_content.php?page=' + page, 
     null, 
     function(result) 
     { 
      $("#"+target_id).html(result); // Or whatever you need to insert the result 
     }, 
     'html'); 
    } 

那麼...問題是，噸他在第一個代碼段中的javascript在被加載時被執行，但我仍然無法理解爲什麼當我在輸入框中輸入時沒有任何事情發生。它應該在<td class="td_error" id="settings_security_error"></td>中寫入javascript函數check_passwords(password, password_confirm)的輸出。

感謝您的幫助。 西爾維奧

Answer 1

一個問題將會是這樣：

$('#settings_security_error').innerHTML = 'Password too short'; 

$('#settings_security_error')是一個jQuery對象;不是DOM元素。你毫無意義地設置了jQuery對象上的innerHTML屬性;這不會做任何有用的事情。

如果你想直接設置DOM元素innerHTML，請執行：

$('#settings_security_error')[0].innerHTML = 'Password too short'; 

或者

$('#settings_security_error').get(0).innerHTML = 'Password too short'; 

或者你可以使用jQuery的.html()或.text()功能（文字（）是最快）：

$('#settings_security_error').text('Password too short'); 

或

$('#settings_security_error').html('Password too short');