Uncaught TypeError: Object # <HTMLParagraphElement>не имеет метода 'click', работает в FF, не работает в chrome .. как это исправить?

Question

Я создаю настраиваемое автозаполнение для окна поиска на нашем сайте.

Я кодировал обработчик события keyup для обработки ввода с клавиатуры для прокрутки списка автозаполнения, введя select select elements / submit formи т. д.

Проблема, с которой я столкнулся, заключается в том, что я хочу, чтобы нажатие клавиши ввода действовало как эквивалент щелчка по элементу.Однако когда клавиша ввода вызывает метод click, связанный с тегом <p>, в chrome обработчик события click не может быть найден.В Firefox это работает просто отлично.

Разрешено ли мне привязывать прослушиватели событий кликов к <p> тегам в chrome?В чем дело?Это прекрасно работает в Firefox.

Вот соответствующий код для конкретных примеров:

Я связал событие click через живой метод jquery со всеми элементами списка, которые добавляются в мой список во времяавтозаполнение примерно так:

$('.suggestion .section li p').live( 'click',  function (){ 

        debugLog("a p tag was clicked");

        $("#search-input").data('skip-hide', true);
        $("#search .suggestion").data('selected-index', -1) ;

        $("#search-input").val($(this).parent().data('search-text'));
        $("#search-input").closest("form").submit();

    });

Затем, чуть позже, я делаю это:

$("#search-input").keyup(function(event){

    switch(event.keyCode )
    {
        case 13:
        if($("#search .suggestion").data('selected-index') != undefined){
            debugLog('a defined index was set when enter was pressed');

//THIS IS THE FAILING LINE IN CHROME
            $("#search .suggestion li p")[$("#search .suggestion").data('selected-index')].click();
            return false;
        }

Фрагмент html, который заполняет мой автокомпетент, выглядит так:

<form id="search-form" action="<?php echo $this->baseUrl(); ?>/search" method="get" accept-charset="utf-8">
            <div id="search">
                <input id="search-input" type="text" class="input-box input-focus" name="q" value="Enter a product or store..." /><input type="image" id="search-form-image" src="/images/nav-btn-search.gif" />

                <div class="suggestion" style="display:none;">
                    <div class="section" id="stores-autocomplete">
                        <strong>Stores</strong> 
                        <ul>
                        </ul>  
                    </div>
                    <div class="section" id="searches-autocomplete">
                        <strong>Searches</strong>
                        <ul>

                        </ul>
                    </div>
                    <div class="section lastChild" id="coupons-autocomplete">
                        <strong>Coupons</strong>
                        <ul>

                        </ul>  
                    </div>
                </div>
            </div>
        </form>

Answer 1

Используйте .eq() вместо [] для выбора абзаца. Затем вызовите .click() (как метод jQuery):

$("#search .suggestion li p").eq($("#search .suggestion").data('selected-index')).click()

При использовании квадратных скобок вы выбираете элемент DOM и пытаетесь вызвать метод DOM .click. Решение включает использование .eq(), чтобы выбрать объект jQuery, чтобы можно было вызывать метод jQuery .click(), он же .trigger('click').