按下回车键触发按钮的ajax点击事件

Question

我需要在按下 Enter 键（键码为 13）时触发 ajax 调用，但是按钮的点击事件无法正常触发：

<div class="input-group col-md-6">
<input type="text" class="form-control" placeholder="Search by Asset ID" maxlength="64" class="form-control" id="imageid" name="imageid"> <span class="input-group-btn">
<button class="btn btn-default image-search" type="button">Search</button>
</span>
</div>

$('#imageid').keyup(function () {
    this.value = this.value.replace(/[^0-9\.]/g, '');
    if (event.keyCode == 13) {
        alert(keyCode);
        event.preventDefault();
        $('.image-search').click();
    }
});

$('.image-search').on('click', function () {
    $.ajax({
        url: url
        method: 'GET',
    });
}

JSfiddle: 链接

更新: 我添加了其余的功能，现在keyCode功能不再起作用。我尝试创建一个$(function () { //code });，但这没有任何区别。当删除第1-173行时，功能正常工作。我认为我只是忽略了一些简单的东西...

更新后的Fiddle: 链接

- Matt

Answer 1

虽然你可以直接调用 .click()，但你可以使用 .trigger()。关于这两种方法之间的区别，这个答案会对这个主题有所启发。就最佳实践而言，从代码阅读的角度来看，我认为这更直观。此外，你在原始 fiddle 中有一个小语法问题，阻止了你向前移动。

执行与给定事件类型匹配的所有处理程序和行为。

$('.image-search').trigger('click');

---

$(function() {
    $('#imageid').keyup(function () {
        this.value = this.value.replace(/[^0-9\.]/g, '');
        if (event.keyCode == 13) {
            event.preventDefault();
            $('.image-search').trigger('click');
        }
    });

    $('.image-search').on('click', function () {
        alert('triggered!');
    });
});

JSFiddle Link

- scniro

---

.click()非常惯用，我没有看到任何可读性问题。 - Barmar

在这个意义上，我也是这样做的。但对我来说，在代码块中以编程方式调用 trigger() 似乎比调用 click() 更冗长，因为我们确实是在 UI 交互的上下文之外触发事件。 - scniro

各有所好，这只是风格偏好。这与代码的正确性无关。 - Barmar

@Matt 未捕获的引用错误：ImglyKit未定义。什么是ImglyKit？这是一些插件吗？您需要引用某些脚本库吗？ - scniro

你为什么没有遇到这个问题？我一启动那个编辑器就报错了。此外，这绝对是相关的，因为JS是错误的 => 编辑器是错误的。也许这可以算作一个新问题，因为它似乎扩大了这个问题的原始范围，因为在之前它是可以工作的。 - scniro

Answer 2

你的js代码中有一些错误：

  $('.image-search').on('click', function () {
       $.ajax({
        url: url
        method: 'GET',
       });
   })//you missed this ")"

这里是可用的代码 http://jsfiddle.net/4uwaz2yd/6/

- JoMendez

---

@sal niro的答案更易读，别忘了在函数中传递“event”参数以使其正常工作。$('#imageid').keyup(function (event) {..............................}); - Jagath Jayasinghe

@Ravi 实际上在函数块中调用 event 是合法的。然而，通常可以看到像 e.keyCode 这样的快捷代码。在这种情况下，显式传递事件参数是必须的，例如 function(e) { e.keyCode }。 - scniro