Два отдельных обработчика для одного события

Question

Я настраиваю свои переключатели с помощью меток 'label', используя селектор «before». Я использую событие click для ярлыков, чтобы сделать его доступным для всех браузеров (хром не поддерживает элементы до/после щелчка). Существует существующий скрипт, который будет показывать/скрывать некоторые элементы при нажатии переключателя.

То, что я пытаюсь сделать

Я пишу сценарий на «нажмите кнопку» событие ярлыках, лейблах. Существующие функции show/hide не работают должным образом, потому что я пытаюсь инициировать щелчок радио при нажатии метки.

Что мне нужно

Мне нужно написать скрипт, который не должен влиять на существующий скрипт (показать/скрыть) и он должен работать во всех браузерах.

То, что я не могу сделать

1. Я не могу закончить это просто давая идентификатор и атрибуты. :(
2. Я не могу настроить существующий сценарий.

То, что я думаю, что я могу сделать

1. я могу изменить HTML/CSS, чтобы создать мою радио любым другим способом. Но есть много мест, чтобы сделать изменения. :(
2. Использование «изменение» событие вместо для показать/скрыть дивы «нажмите».

Пример кода

/*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

У меня есть решение, но проверить, если вы можете это после существующего кода события кликов. В принципе, я пытаюсь отвязать существующее событие click и переписать его в другом файле document.ready. Проверьте, возможно ли это:

$(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 */ 

Я проверил это в Firefox и Chrome, и код работает над обоими.

Answer 2

Поскольку вы не можете редактировать существующий JS, вы не должны добавлять дополнительные JS к нему.

Просто оберните ваши названия в <span>
и чем как <span> и <input> в свой <label> элемент:

/* 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>