.stopPropagation() 放在输入上不允许输入输入文本

Question

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

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();
        })

Answer 1

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

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

到列搜索 JS 片段并解决了问题。

.stopPropagation() 放在输入上不允许输入输入文本

.stopPropagation() placed on input not allowing for input text to be entered

javascript

jquery

event-handling

jquery-events