Bagaimana Mengendalikan Peristiwa Perubahan Kotak Semak dan Klik dalam jQuery Tanpa Kelakuan Tidak Konsisten?

Perubahan Kotak Semak jQuery dan Teka-teki Peristiwa Klik

Peristiwa perubahan dan klik jQuery kadangkala boleh membawa kepada tingkah laku yang tidak dijangka apabila bekerja dengan kotak pilihan. Khususnya, apabila peristiwa perubahan berlaku sebelum tetingkap timbul pengesahan, ia boleh mengakibatkan ketidakkonsistenan antara keadaan kotak pilihan dan medan teks yang berkaitan.

Masalahnya

Pertimbangkan kod berikut:

$(document).ready(function() {
  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

Dalam senario ini, peristiwa perubahan mengemas kini nilai medan teks berdasarkan keadaan kotak pilihan. Walau bagaimanapun, acara klik memaparkan pop timbul pengesahan apabila kotak semak dinyahtandai. Jika pengguna membatalkan tindakan itu, kotak semak akan kekal ditandakan, tetapi peristiwa perubahan telah pun dicetuskan. Ini meninggalkan medan teks dengan nilai yang salah.

Penyelesaian

Untuk menangani masalah ini, kita perlu mengubah suai kod untuk melancarkan pop timbul pengesahan sebelum acara tukar. Satu pendekatan ialah menggunakan kaedah prop() untuk mengurus keadaan yang ditandakan secara pemrograman:

$(document).ready(function() {
  $('#textbox1').val(this.checked);

  $('#checkbox1').change(function() {
    if(this.checked) {
        var returnVal = confirm("Are you sure?");
        $(this).prop("checked", returnVal);
    }
    $('#textbox1').val(this.checked);        
  });
});

Dalam kod yang dikemas kini ini, peristiwa perubahan mencetuskan pop timbul pengesahan apabila kotak semak ditandakan. Jika pengguna membatalkan tindakan, kaedah prop() memulihkan keadaan kotak semak dan menghalang peristiwa perubahan daripada mengemas kini medan teks dengan nilai yang salah.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Peristiwa Perubahan Kotak Semak dan Klik dalam jQuery Tanpa Kelakuan Tidak Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!