Странная проблема с JavaScript

Question

Я создаю страницу, динамически загружаемую с помощью 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 в первом фрагменте выполняется, когда он загружается функцией $.get, но я до сих пор не могу понять причину, по которой при вводе в поля ввода ничего не происходит.Он должен записать вывод функции javascript check_passwords(password, password_confirm) в <td class="td_error" id="settings_security_error"></td>.

Спасибо за помощь.Сильвио

Answer 1

Одна проблема будет такой:

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

$('#settings_security_error') - это объект jQuery; не элемент DOM. Вы бессмысленно устанавливаете свойство innerHTML для объекта jQuery; который не будет делать ничего полезного.

Если вы хотите установить элементы 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');