jquery - 未捕获类型错误 : Object # has no method 'click' works in FF fails in chrome. 。怎么修？

Question

我正在为我们网站上的搜索框构建自定义自动完成功能。

我编码了 keyup用于处理键盘输入的事件处理程序，用于滚动自动完成列表、输入选择元素/提交表单等...

我遇到的问题是我想要一个输入 keypress相当于单击元素。然而，当输入 keypress调用绑定(bind)到<p>的click方法标签，在Chrome中，找不到点击事件处理程序。在 Firefox 中它工作得很好。

我是否不允许将点击事件监听器绑定(bind)到 <p> Chrome 中的标签？这是怎么回事？这在 Firefox 中完美运行。

以下是具体示例的相关代码:

我已经通过 jQuery 的 live 方法将点击事件绑定(bind)到在自动完成过程中附加到我的列表中的所有列表元素，如下所示:

$('.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') ，可以调用方法。