Question

我在结果中使用Typeahead库和自定义模板。结果包含一个可单击的链接，该链接应该扩展结果中的元素。我正在使用jQuery.on将click事件处理程序附加到此元素。单击元素时，将触发typeahead selected事件并关闭数据集框。我尝试在点击事件中添加e.stopPropagation()，但似乎无效。

目标是在单击此链接时保持typeahead tt-dataset搜索结果框处于打开状态。我应该这样做吗？

编辑：我正在使用猎犬作为先行资源

$(document).on('click', '.mylink', function(e) {

    if ($(e.target).is('.mylink')) {
        //don't close the search results.  this isn't working
        e.stopPropagation();
        //show div
    }   

});

tt-dataset的html模板（我希望mylink锚点保持打字输出框）：

<script id="search-template" type="text/x-handlebars-template">    
    <div>
        <strong>{{value}}</strong>
        <span><a href="javascript:;;" class="mylink">show</a></span>
        <div style="display:none">show this</div>
    </div>
</script>

Answer 1

根据JQuery API文档

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。

这样就解释了你的问题。

它不优雅，但是等待typeahead在DOM中创建建议，然后在点击工作中附加事件处理程序：

http://jsbin.com/subupe/8/

修改您也可以在onClick处理程序中使用纯JavaScript。无论您的自动填充建议来源如何，这都应该有效。

function dontClose(e) { console.log('Dont close'); e = e || event; if (e.bubbles && e.stopPropagation) { e.stopPropagation(); } else { // all other browsers e.cancelBubble = true; } console.log($(e.target).text()); // do stuff with the target return false;

}

/* ... */ templates : { suggestion: Handlebars.compile('<p><strong>{{value}}</strong></p><span><a href="javascript:;;" onClick="dontClose()" class="mylink">show</a></span><div style="display:none">show thisaa</div>') }

更新了jsbin：http://jsbin.com/subupe/9/

防止先行数据集在点击时关闭

1 个答案: