Pertanyaan jQuery beberapa kejadian untuk memicu fungsi yang sama


Apakah ada cara untuk memilikinya keyup, keypress, blur, dan change Peristiwa memanggil fungsi yang sama dalam satu baris atau apakah saya harus melakukannya secara terpisah?

Masalah yang saya miliki adalah bahwa saya perlu memvalidasi beberapa data dengan pencarian db dan ingin memastikan validasi tidak terjawab dalam hal apapun, apakah itu diketik atau disisipkan ke dalam kotak.


802
2018-03-28 18:53


asal


Jawaban:


Kamu dapat memakai .on() untuk mengikat fungsi ke beberapa acara:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Atau hanya melewatkan fungsi sebagai parameter ke fungsi acara normal:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

1464
2018-03-28 18:56



Mulai dari jQuery 1.7, the .on() metode adalah metode yang disukai untuk melampirkan penangan kejadian ke dokumen. Untuk versi sebelumnya, .bind() metode digunakan untuk melampirkan event handler langsung ke elemen.

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

49
2017-11-14 08:14



Saya mencari cara untuk mendapatkan jenis acara saat jQuery mendengarkan beberapa acara sekaligus, dan Google menempatkan saya di sini.

Jadi, bagi yang tertarik, event.type adalah jawaban saya:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Info lebih lanjut di jQuery doc.


36
2018-05-14 22:00



Kamu dapat memakai metode mengikat untuk melampirkan fungsi ke beberapa acara. Hanya lewat nama acara dan fungsi handler seperti dalam kode ini:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Pilihan lain adalah menggunakan dukungan chaining dari jquery api.


19
2018-03-28 18:55



Jika Anda melampirkan event handler yang sama ke beberapa acara, Anda sering mengalami masalah lebih dari satu dari mereka menembak sekaligus (misalnya pengguna menekan tab setelah mengedit; keydown, perubahan, dan blur mungkin semua menyala).

Kedengarannya seperti apa yang sebenarnya Anda inginkan adalah sesuatu seperti ini:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

12
2018-03-28 19:33



Anda dapat menentukan fungsi yang ingin Anda gunakan kembali seperti di bawah ini:

var foo = function() {...}

Dan kemudian Anda dapat mengatur berapa banyak pendengar acara yang Anda inginkan pada objek Anda untuk memicu fungsi yang menggunakan pada ('event') meninggalkan ruang di antara seperti yang ditunjukkan di bawah ini:

$('#selector').on('keyup keypress blur change paste cut', foo);

10
2018-04-08 17:51



Beginilah cara saya melakukannya.

        $("input[name='title']").on({
            "change keyup": function(e){
                var slug = $(this).val().split(" ").join("-").toLowerCase();
                $("input[name='slug']").val(slug);
            },
        });

6
2017-11-09 12:46



Jawaban oleh Tatu adalah bagaimana saya akan secara intuitif melakukannya, tetapi saya telah mengalami beberapa masalah di Internet Explorer dengan cara bersarang / mengikat peristiwa ini, meskipun itu dilakukan melalui .on() metode.

Saya tidak dapat menentukan dengan tepat versi jQuery mana yang bermasalah dengan ini. Tetapi saya terkadang melihat masalah dalam versi berikut:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Ponsel 1.3.0b1
  • Ponsel 1.4.2
  • Ponsel 1.2.0

Solusi saya adalah mendefinisikan fungsi terlebih dahulu,

function myFunction() {
    ...
}

dan kemudian menangani kejadian secara individual

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Ini bukan solusi tercantik, tetapi itu berhasil untuk saya, dan saya pikir saya akan meletakkannya di sana untuk membantu orang lain yang mungkin tersandung pada masalah ini


4
2018-04-07 08:57



"Apakah ada cara untuk memilikinya keyup, keypress, blur, dan change Peristiwa memanggil fungsi yang sama dalam satu baris? "

Itu mungkin menggunakan .on(), yang menerima struktur berikut: .on( events [, selector ] [, data ], handler ), sehingga Anda dapat melewati beberapa acara ke metode ini. Dalam kasus Anda seharusnya terlihat seperti ini:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

Dan inilah contoh langsungnya:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">


2
2017-09-26 19:16



$("element").on("event1 event2 event..n", function() {
   //execution
});

Tutorial ini adalah tentang menangani beberapa acara.


0
2018-04-22 08:47