时间戳

首页 > 解决方案 > .stopPropagation() 放置在输入上，不允许输入输入文本

javascript - .stopPropagation() 放置在输入上，不允许输入输入文本

问题描述

我正在尝试将列搜索添加到表中的某些列（使用数据表）。我将用于搜索的输入字段添加到表格的每个标题单元格中。Datatables 使您在任何时候单击标题时都会更改排序方法，因此我插入.stopPropagation了附加到输入字段的单击事件，以便在单击标题单元格的输入部分时不会更改列上的排序。唯一的问题是它.stopPropagation正在工作并且不影响排序，但是当单击输入字段时，它不允许我向该字段添加文本。我不确定我做错了什么。这是代码片段（这被放入用于在我们网站上创建每个表的代码中）：

var columnsearch = $(this).find('th');
        columnsearch.each(function () {
        var title = $(this).text();
        $(this).append( '<input type="search" placeholder="Search '+title+'" />' );
        })

        var textbox = $(this).find('input')
        textbox.click(function (event) {
            event.stopPropagation();
        })

放置在表格标题中的列搜索的图像

标签： javascriptjqueryevent-handlingjquery-events

解决方案

在进行了一些挖掘之后，我通过使用 Chrome 检查器的事件侦听器部分发现了我们在 Datatables 上启用的一项功能 colReorder，用于重新排列列，它通过冲突mousedown事件干扰了输入字段的功能。我补充说：

textbox.mousedown(function(event){
            event.stopPropagation();
        })

到列搜索 JS 部分，这解决了问题。

推荐阅读