Не удается получить доступ к элементу DOM с помощью jQuery

Question

Я просто пытаюсь добавить строку в существующий элемент DOM, используя jQuery. Я делал это 1000 раз раньше, но по какой-то причине мой код плохо себя ведет. Следующий пример работает отлично, как и следовало ожидать:

<input type="submit" id="submit" value="submit" />

<ul id="myList">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</ul>

<script>
    $('#submit').click(function(){
        $('#myList').append('<li>fourth list item</li>');
        //alert('Here I am');
    });
</script>

Теперь в моем приложении я динамически отображаю неупорядоченный список и связанные li, что, опять же, никогда не было проблемой раньше. Я не могу понять, почему моя функция щелчка не добавляется к объекту myList. Я даже прямо из консоли FireBug пробовал следующее:

>>$('#myList').hide()

и опять ничего не происходит. Я подтвердил, что идентификатор элемента DOM "myList" существует, я просто не могу манипулировать им или взаимодействовать с ним. Какой лучший способ отладить что-то подобное?

Заранее спасибо!

Answer 1

Другие постеры верны, что вам нужен наблюдатель событий, ориентированный на будущее, поскольку вы динамически создаете элементы, и привязки необходимо прикреплять после их создания. При этом, live() очень дорого. Делегат работает в 3 раза быстрее, чем live():

Попробуйте это:

$(document.body).delegate('#submit','click',function(){
    $('#myList').hide();
});

Сравнительные данные: http://jsperf.com/jquery-live-vs-jquery-delegate/15

Answer 2

Вы имеете в виду <ul>, как говорили другие.<lu> не является тегом HTML.

Вероятно, ваша проблема вызвана созданием нескольких списков с одинаковым Id в качестве существующего элемента на странице.Id должен быть уникальным, чтобы это тоже работало, потому что jQuery, вероятно, просто выберет один элемент, если вы выберете по Id.Не говоря уже о том, что ваш код недействителен, и манипуляции с CSS и DOM могут привести к неожиданным результатам.Если у вас есть более одного из этих списков на странице одновременно, вы должны сделать его классом вместо идентификатора, или если у них у всех один и тот же родитель, дайте этому родителю идею и используйте его для выбора <ul> s

Answer 3

Если вы динамически генерируете ul, вам нужно использовать jQuery live:

<input type="submit" id="submit" value="submit" />

<lu id="myList">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</lu>

<script>
    $('#submit').live('click',function(){
        $('#myList').append('<li>fourth list item</li>');
        //alert('Here I am');
    });
</script>

Редактировать:

Увы, live(), похоже, не имеет значения: http://jsfiddle.net/citizenconn/YBZSJ/

Возможно, попробуйте в firebug:

alert($);

Просто чтобы убедиться, что вы 'перезвонил правильно.Обратите внимание на мою скрипку, если вы звоните $('#myList').hide();, ничего не происходит, но если вы звоните hide() на самом элементе, он работает.

Я оставляю этот ответ здесь для справки.

Answer 4

Попробуйте это (.live () вместо .click ()):

$('#submit').live('click', function(){
    $('#myList').append('<li>fourth list item</li>');
    //alert('Here I am');
});

Answer 5

У вас есть lu вместо ul

<lu id="myList">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
</lu>

Answer 6

отлично работает для меня .

Кроме того, у вас есть <lu>, где вы имеете в виду <ul>.