it-swarm-id.com

jQuery mendeteksi klik pada tombol kirim yang dinonaktifkan

Fiddle: http://jsfiddle.net/ugzux/

Seperti yang Anda lihat, saya memiliki formulir dengan tombol kirim yang dinonaktifkan (via javascript). 

Saya ingin dapat mengikat acara klik ke sana, jadi saya bisa melakukan beberapa indikasi jazzy tentang apa yang perlu diperbaiki pada input sebelum saya akan mengizinkan formulir untuk dikirimkan (yaitu mengaktifkan tombol lagi).

Namun, menonaktifkan tombol kirim juga nampaknya menonaktifkan acara klik yang terikat pada tombol, bahkan jika mereka terikat setelah dinonaktifkan - ada ide bagaimana menyiasatinya?

Praktis, salah satu solusinya adalah berhenti menonaktifkan tombol dan bukannya memiliki acara yang tidak

$('form').submit(function(event){
    event.preventDefault(); 
});

Namun saya ingin mengetahui seluk beluk input yang dinonaktifkan dan peristiwa javascript, dan jika ada penyelesaian karena saya belum pernah menemukan perilaku ini sebelumnya.

37

Menemukan ini di pertanyaan - ini

Firefox, dan mungkin browser lainnya, menonaktifkan acara DOM pada bidang formulir yang dinonaktifkan. Setiap peristiwa yang dimulai pada bidang formulir yang dinonaktifkan adalah sepenuhnya dibatalkan dan tidak menyebarkan pohon DOM. Betulkan saya jika saya salah, tetapi jika Anda mengklik tombol yang dinonaktifkan, sumber acara adalah tombol dinonaktifkan dan acara klik sepenuhnya musnah. Peramban secara harfiah tidak tahu tombol diklik, juga tidak meneruskan acara klik. Seolah-olah Anda mengklik pada lubang hitam di halaman web.

Saya pikir Anda mungkin dapat 'memalsukan' klik dengan membungkus tombol dalam div dan menembakkan logika pada acara klik div itu. Tetapi, seperti yang ditunjukkan di atas, peristiwa pada elemen cacat tampaknya tidak menggelembungkan pohon DOM. 

44
ipr101

Cara terbaik yang saya temukan untuk melakukan ini adalah dengan menggunakan kelas "dinonaktifkan" untuk menonaktifkan tombol. Anda kemudian dapat menangkap peristiwa klik secara normal di jquery. Jika $(this).hasClass('disabled'), Anda melakukan hal-hal 'indikasi jazzy' Anda, bersama dengan event.preventDefault(); Setelah pengguna melakukan hal mereka, Anda dapat removeClass('disabled') dari input[type="submit"] 'tombol'. Mudah!

8

Anda bisa meletakkan div di sekitar tombol kirim dan lampirkan fungsi klik pada saat ketika tombol kirim dinonaktifkan:

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
    if (attr('submit-button', 'disabled') == 'true')
    {
        alert('Button Disabled')
    }
});

Ini hanya kode dari atas kepala saya, jadi mungkin tidak tepat. Tapi Anda mengerti maksudnya.

7
JackalopeZero
$(document).on('click', '.wrapper-of-disabled-button', function(){
  if ($(this).find('button.disabled').length > 0) {
    // Do your magic on the parent -> $(this)
  }
});

Ini dia;)

2
Dobromir Penchev

Membuat tombol readonly dapat membantu, karena acara klik akan diaktifkan. Sadar akan perbedaan perilaku .

<input type="submit" value="Submit" readonly="readonly" />
0
Dennis Golomazov

Solusi lain dengan kombinasi kotak centang yang diperlukan dapat berupa:

<input type="checkbox" class="einwilligung" name="einwilligung" value="ja"/>
<div class="einwilligung_hinweis">U need to check this box</div>
<div class="button_outer">
        <input type="submit" name="submit" value="Senden" id="submitButton" disabled="disabled" class="nope btn" />
        <span class="button_overlay"></span>
 </div>

CSS-Magic

#submitButton{
display:inline-block;
color:#D00019;
width:160px;
z-index:30;
position:absolute;
display:block;
top:0;
left:0;
height:30px;
outline:none;
}

#submitButton.nope{
z-index:10;
color:#333;
}

.button_outer {
width:162px;
height:32px;
z-index:50;
position:relative;
}

span.button_overlay{
display:block;
height:30px;
width:162px;
position:absolute;
top:0;
left:0;
background:#fff;
opacity:0.3;
filter: alpha(opacity=30);
z-index:20;
}

.einweilligung_hinweis_error{
color:red;
}

JQuery-Stuff

(document).ready(function() {

  $('.einwilligung').click(function() {
    var buttonsChecked = $('.einwilligung:checked');
    if (buttonsChecked.length) {
      $('#submitButton').removeAttr('disabled');
      $('#submitButton').removeClass('nope');
      $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
    }
    else {
      $('#submitButton').attr('disabled', 'disabled');
      $('#submitButton').addClass('nope');
    }
  });

  $('.button_outer').click(function(){
     if($('#submitButton').hasClass('nope')){
          $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error');
      }else{
          $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error');
      }
  });

});

Mungkin tidak canggih, tetapi bekerja cukup baik!

  • kotak centang perlu diperiksa untuk memberikan tombol kirim indeks z yang lebih tinggi
  • jika tidak, ada tombol button_overlay di atas, dengan acara klik di atasnya, untuk menyorot pesan
0
Marten Brosch

Anda harus menggunakan .disabled kelas ke elemen gaya agar terlihat dinonaktifkan dan kemudian menanganinya seperti yang Anda inginkan menggunakan .hasClass ('. Dinonaktifkan') dalam kode JS Anda . Itu bisa bekerja selama Anda tidak meletakkan "pointer- acara: tidak ada; " deklarasi dalam kode css Anda untuk kelas .disabled

0
Milena Beerg