触发按钮单击输入键上的ajax

时间:2021-11-01 00:00:28

I need to trigger the ajax call when the Enter key is pressed (keycode 13), but this is not triggering the button click correctly:

我需要在按下Enter键时触发ajax调用(键码13),但这不会触发按钮正确点击:

<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: link

UPDATE: I added the rest of the functionality, and now the keyCode functionality no longer works. I tried creating one $(function () { //code });, but this is making no difference. When removing lines 1-173, the functionality works. I think I'm just missing something simple here...

更新:我添加了其余的功能,现在keyCode功能不再有效。我尝试创建一个$(function(){// code});但这没什么区别。删除第1-173行时,功能有效。我想我在这里错过了一些简单的东西......

UPDATED Fiddle: link

更新的小提琴:链接

2 个解决方案

#1


While you can call .click() directly, you can instead leverage .trigger(). For some technical insight on the difference between the two methods, this answer will shed some light on the topic. As far as best practice, I'd argue this is more intuitive from a code reading perspective. Also, you had a minor syntax issue in your original fiddle, preventing you from moving forward.

虽然您可以直接调用.click(),但您可以使用.trigger()。对于这两种方法之间差异的技术见解,这个答案将对该主题有所启发。就最佳实践而言,我认为从代码阅读的角度来看,这更直观。此外,您在原始小提琴中遇到了一个小的语法问题,导致您无法继续前进。

Execute all handlers and behaviors attached to the matched elements for the given event type.

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

$('.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

#2


You had some errors in your js code:

您的js代码中有一些错误:

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

Here is the code that works http://jsfiddle.net/4uwaz2yd/6/

这是代码http://jsfiddle.net/4uwaz2yd/6/

#1


While you can call .click() directly, you can instead leverage .trigger(). For some technical insight on the difference between the two methods, this answer will shed some light on the topic. As far as best practice, I'd argue this is more intuitive from a code reading perspective. Also, you had a minor syntax issue in your original fiddle, preventing you from moving forward.

虽然您可以直接调用.click(),但您可以使用.trigger()。对于这两种方法之间差异的技术见解,这个答案将对该主题有所启发。就最佳实践而言,我认为从代码阅读的角度来看,这更直观。此外,您在原始小提琴中遇到了一个小的语法问题,导致您无法继续前进。

Execute all handlers and behaviors attached to the matched elements for the given event type.

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

$('.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

#2


You had some errors in your js code:

您的js代码中有一些错误:

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

Here is the code that works http://jsfiddle.net/4uwaz2yd/6/

这是代码http://jsfiddle.net/4uwaz2yd/6/