Question

我正在通过AJAX加载包含jquery数据表的页面。我的目标是当用户开始输入过滤器（通过数据表提供的默认值）时，抓取输入并应用自定义过滤。触发keyup事件时将应用自定义逻辑。由于我使用的是AJAX，因此我无法直接使用api中使用的javascript，因为所有内容都不会被加载。但是，在this帖子的帮助下，我能够触发某些事件（点击，聚焦）才能正常工作。现在，我似乎无法解决 keyup 事件。我有以下内容：

更新

HTML

这有效：

// Event fires correctly
$(document).on("focus", 'input[type="search"]', function () {
    alert('focus');
});

这不起作用：

// Event never fires
$(document).on("keyup", 'input[type="search"]', function () {
    alert('keyup');
});

使用ajax时，为数据表搜索栏调用on keyup事件的正确方法是什么？

Answer 1

您确定您的选择器与正确的输入元素匹配吗？

<强>更新

您是否可以尝试绑定keyup事件处理程序，如下所示？

$("input[type='search']").on("keyup", function () {
    alert('keyup');
});

如果附加到文本框的另一个keyup事件处理程序停止了事件的传播，则使用 $（document）.on注册的事件处理程序（＆＃34; keyup＆＃34;，＆＃34;输入[type =＆＃39; search＆＃39;]＆＃34;，...）不会被触发。但是，其他事件处理程序使用 $（＆＃34;输入[type =＆＃39; search＆＃39;]＆＃34;）。（＆＃34; keyup＆＃34;，.. 。）被触发。

这是一段代码剪辑，演示了这种行为：

＆＃13;

$(document).ready(function() {

    var first_count = second_count = third_count = 0;
    $("input[type=text]").on("keyup", function (event) {event.stopPropagation(); first_count = first_count + 1; $("#first-handler").html(first_count)})
    
    $(document).on("keyup", "input[type=text]", function () {second_count = second_count + 1; $("#second-handler").html(second_count)})
    
    $("input[type=text]").on("keyup", function () {third_count = third_count + 1; $("#third-handler").html(third_count)})    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
          First event handler invocations: <span id="first-handler">0</span> <br/>
          
          Second event handler invocations: <span id="second-handler">0</span> <br/>
          
          Third event handler invocations: <span id="third-handler">0</span> <br/>
          
          <input type="text" placeholder="Type here" />
</div>

＆＃13;

输入文本附加了三个事件处理程序。第一个和第三个事件处理程序使用 $（＆＃34; input [type = text]＆＃34;）on 注册，第二个事件处理程序使用 $（文档）注册。对即可。 First事件处理程序停止事件的传播，因此永远不会触发第二个事件处理程序。但是，无论事件传播是否停止，都会触发直接在元素上注册的第三个事件处理程序。

Answer 2

尝试使用$('input[type="search"]').keyup(function(){/* do something */ });。

我希望它能解决

更新

var target = document.body;
var observer = new MutationObserver(function() {
    $('input[type="search"]').keyup(function(){console.log("dddd") });  
});

// configuration of the observer:
var config = { childList: true, subtree: true};

// pass in the target node, as well as the observer options
observer.observe(target, config);

请选择最适合观察的目标。

将输入元素附加到HTML DOM后绑定。

Answer 3

我猜你的HTML是错的，或者你没有发布的代码中的其他内容。例如，这可以正常工作：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <input type="search">
</body>
</html>
<script>
    $("input[type='search']").on("keyup", function () {
        alert('keyup');
    });
</script>

使用ajax时，数据表搜索输入的键盘事件未触发

3 个答案: