JQuery не может получить доступ к элементу DOM с помощью идентификатора, но может с .class

Question

Ранее я опубликовал похожий вопрос и получил несколько хороших предложений. После дальнейшего расследования я обнаружил, что поведение достаточно отличается, чтобы оправдать новый вопрос.

Я ищу предложения относительно лучшего способа отладки нечетного поведения jQuery.

Следующий пример кода работает как положено здесь при добавлении к ul либо по идентификатору, либо по ссылке на класс.

<input type="submit" id="submitID" value="ID" />
<input type="submit" id="submitClass" value="Class" />

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

<script>
    $('#submitID').click(function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').click(function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

Однако в моем приложении я не могу добавить, используя ссылку #myList ID, и не могу понять, почему. Я динамически рендеринг элементов ul и li, и я попытался, как предлагалось, использовать следующий подход вместо события click:

<script>
    $('#submitID').live('click', function(){
        $('#myList').append('<li>fourth list item</li>');
    });

    $('#submitClass').live('click', function(){
        $('.myClass').append('<li>fourth list item</li>');
    });
</script>

В консоли FireBug я могу взаимодействовать с объектом, используя .myClass, но не #myList. Например, набрав в консоли FireBug следующее:

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

не скрывает элемент #myList, как я ожидаю. Консоль просто возвращает [].

Любые предложения приветствуются.

Answer 1

Мне известно только пять причин, по которым адресация не будет работать:

1. Этот идентификатор на самом деле не на странице, как вы думаете.
2. элемент с этим идентификатором еще не был загружен.
3. Этот идентификатор находится на странице более одного раза.
4. Вы на самом деле не запрашиваете идентификатор, которым вы себя считаете.
5. Ваш идентификатор содержит недопустимые символы.
6. Элемент находится в фрейме или фрейме.Поскольку на самом деле это отдельный документ от родительского документа, при поиске в каком-либо другом документе не будут найдены элементы во встроенном фрейме.Вам нужно будет выполнить поиск в самом iframe.

Чтобы проверить первый элемент, если это статический HTML, выполните View / Source и убедитесь, что на странице есть то, что вы действительно ожидаете.там.

Если это динамически генерируемый HTML, то вам нужно будет включить отладчик в момент, когда объект был создан, и использовать инспектор объектов, чтобы убедиться, что он действительно существует с соответствующим идентификатором.

Помните, что идентификаторы могут существовать только один раз на странице.Если существует более одного объекта с одним и тем же объектом, то getElementById или $ ("# xxxx") не определены и не будут возвращать надежные результаты.

Answer 2

Возможно, у вас 2 элемента с одинаковым идентификатором.

Answer 3

попробуйте поместить функции в $ (document) .ready, чтобы убедиться, что элементы DOM загружены, например:

<script>
    $(document).ready(function() {

        $('#submitID').click(function(){
            $('#myList').append('<li>fourth list item</li>');
        });

        $('#submitClass').click(function(){
            $('.myClass').append('<li>fourth list item</li>');
        });

    });
</script>

Надеюсь, это поможет ...

Answer 4

Я обнаружил, что некоторые сторонние библиотеки переопределяют метод jQuery $.В нашем случае это привело к тому, что селектор jQuery #elementID был передан в document.getElementById("#elementID"), который явно не найдет элемент, поскольку # является селектором jQuery.Переопределение функции ниже:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Мы переименовали функцию с $ на $i3c только в этом файле скрипта.Это позволило всем другим jQuery-зависимым java-скриптам успешно найти элемент и устранить проблему.