Question

我有一个搜索字段。我想在该搜索输入字段中的任何或任何更改中调用我的jQuery函数。但是，当我在该输入字段中进行更改并单击该字段之外时，将调用jQuery函数。

html

<input type="search" id="campiagn_search_id" name="campaign_search" placeholder="Campaign Search">

jQuery

   $(document).ready(function(){
      $(document).on('change', '#campiagn_search_id', function() {
        alert("The text has been changed.");
      });
    });

虽然我键入a并在字段之外单击，但显示的警报除外。但是我想在键入a时自动调用jQuery函数并显示警告框。

问题出在哪里？请有人帮忙吗？

Answer 1

因为您已将change事件附加到input，该事件被触发When the element loses focus after its value was changed-https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event。

$(document).ready(function(){
    $('#campiagn_search_id').on('keyup', function() {
        console.log($(this).val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="campiagn_search_id" name="campaign_search" placeholder="Campaign Search">

Answer 2

通过搜索功能，建议您在用户标签上单击blur事件或单击外部控件。

发生keyup事件时，您的API可能会被调用多次。

$(document).ready(function(){
    $('#campiagn_search_id').blur(function() {
        alert($(this).val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="campiagn_search_id" name="campaign_search" placeholder="Campaign Search">

Answer 3

您可以使用它。

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import de.codecentric.boot.admin.server.config.EnableAdminServer;

@EnableAdminServer
@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

}

在输入字段中的任何更改上调用jQuery函数

3 个答案: