Aynı etkinlik için iki ayrı işleyici

Question

“Önce” düğmesini kullanarak radyo düğmelerimi 'etiket' etiketleriyle şekillendiriyorum. Tüm tarayıcılarda tıklanabilir olmasını sağlamak için etiketler için 'click' etkinliğini kullanıyorum (chrome, tıklamadan önce/sonra öğeleri desteklemiyor). Radyo düğmesini tıklatarak bazı öğeleri gösterecek/gizleyecek mevcut bir betik var. Ben lables olay 'click' üzerine bir senaryo yazıyorum

yapmaya çalışıyorum ne

. Mevcut şov/saklama işlevselliği düzgün çalışmıyor çünkü etiket tıklarken radyoyu tıklamaya çalışıyorum.

Ben

gerekenler Ben mevcut komut dosyası (göstermek/gizlemek) etkilememesi gereken senaryo yazmaya gerek ve tüm tarayıcılarda çalışması gerekir. Ben

1. ben sadece id vererek ve özellikleri için bitiremeyiz yapamaz Ne

   . :(

2. ben
   1. Ben başka arada Radyomu tasarlamak için HTML/CSS değiştirebilir yapabileceğini düşünüyorum ne.

   varolan senaryoyu özelleştirmek. Ama yapamayacağım yerlerin çok değişikliklerini yapmak için vardır. :(

3. yerine göstermek/gizlemek div için "tıklayın" nin "değişim" olayını kullanma.

Kod örneği varolan JS düzenlemek için izin verilmez yana

/*what I'm trying...*/ 
 
$(document).ready(function(){ 
 
    $('input[type="radio"]+label').on('click',function(){ 
 
    $(this).prev().click(); 
 
    }); 
 
}); 
 

 
/*existing script*/ 
 
$('input[name="fieldname"]').click(function(){ 
 
    if($('#fieldid').is(':checked')){ 
 
    $('#divid').show(); 
 
    $('#divid1').hide(); 
 
    } else if($('#fieldid1').is(':checked')){ 
 
    $('#divid1').show(); 
 
    $('#divid').hide(); 
 
    } 
 
}); 
 
/*existing script*/

.divs, input[type="radio"]{display:none;} 
 

 
input[type="radio"]+label::before{ 
 
    content:" "; 
 
    display:inline-block; 
 
    position:relative; 
 
    left:0; 
 
    top:0; 
 
    background:red; 
 
    height:10px; 
 
    width:10px; 
 
    border-radius:50%; 
 
} 
 
input[type="radio"]:checked+label::before{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" /> 
 
    <label>show textfield</label> 
 
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" /> 
 
    <label>show button</label> 
 
    <div id="divid" class="divs"><input type="text" size="30"></div> 
 
    <div id="divid1" class="divs"><input type="submit" value="button"></div> 
 
</form>

Answer 1

Bir çözüm var, ama bu yerleştirebilirsiniz olmadığını kontrol Mevcut tıklama etkinliği kodundan sonra. Temel olarak, mevcut tıklama olayını açmaya çalışıyorum ve başka bir document.ready segmentinde yeniden yazmayı deniyorum. Bunun mümkün olup olmadığını kontrol edin:

$(document).ready(function(){ 
     // Unbind the existing click event 
     $('input[name="fieldname"]').unbind("click"); 

     // if any label immediately after radio is clicked, call radio's click event 
     $('input[type="radio"]').next('label').on('click',function(){ 
      $(this).prev('input[type="radio"]').click(); 
     }); 

     // radio is clicked 
     // if the label next to radio says show textfield/show button 
     // find the sibling div which has input of type this/that, and show/hide 
     $('input[type="radio"]').on('click',function(){ 
     /*if ($(this).next('label').html().trim().toLowerCase()=='show textfield') { 
      $(this).siblings("div.divs").has('input[type="text"]').show(); 
      $(this).siblings("div.divs").has('input[type="submit"]').hide();   
     } else if ($(this).next('label').html().trim().toLowerCase()=='show button') { 
      $(this).siblings("div.divs").has('input[type="text"]').hide(); 
      $(this).siblings("div.divs").has('input[type="submit"]').show(); 
     }*/ 
     if ($(this).next('label').html().trim().toLowerCase()=='show textfield') { 
      $(this).siblings("div.divs:eq(0)").show(); 
      $(this).siblings("div.divs:eq(1)").hide();  
     } else if ($(this).next('label').html().trim().toLowerCase()=='show button') { 
      $(this).siblings("div.divs:eq(0)").hide(); 
      $(this).siblings("div.divs:eq(1)").show();  
     } 

     }); /* end click */ 
    }); /* end doc.ready */ 

Bunu Firefox ve Chrome'da kontrol ettim ve kod her ikisinde de çalışıyor.

Answer 2

, ayrıca buna için herhangi bir ek JS eklemek gerekmez.

Basitçe başlıkları<span>
içine ve <label> eleman içine hem <span> ve <input> daha sarın:

/* ABSOLUTELY NO NEED TO ADD ANYTHING */ 
 

 
/*existing script*/ 
 
$('input[name="fieldname"]').click(function(){ 
 
    if($('#fieldid').is(':checked')){ 
 
    $('#divid').show(); 
 
    $('#divid1').hide(); 
 
    } else if($('#fieldid1').is(':checked')){ 
 
    $('#divid1').show(); 
 
    $('#divid').hide(); 
 
    } 
 
}); 
 
/*existing script*/

.divs, input[type="radio"]{display:none;} 
 

 
/* SIMPLY CHANGE `label` to `span` and you're done! */ 
 
input[type="radio"]+span::before{ 
 
    content:" "; 
 
    display:inline-block; 
 
    position:relative; 
 
    left:0; 
 
    top:0; 
 
    background:red; 
 
    height:10px; 
 
    width:10px; 
 
    border-radius:50%; 
 
} 
 
input[type="radio"]:checked+span::before{ 
 
    background:blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Wrap INPUT and the new SPAN into LABEL --> 
 

 
<form> 
 
    <label> 
 
    <input type="radio" name="fieldname" id="fieldid" class="fieldclass" /> 
 
    <span>show textfield</span> 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" /> 
 
    <span>show button</span> 
 
    </label> 
 
    <div id="divid" class="divs"><input type="text" size="30"></div> 
 
    <div id="divid1" class="divs"><input type="submit" value="button"></div> 
 
</form>