简体   繁体   中英

Change event doesn't fire more than once same element

I have a group of radio buttons that fires a event when is clicked, in my case change.

In my case I have 5 options. The problem is when i click in the first option ("never arrived") the event fires up with no problem, but if i try to fire again, it stops, it doesnt work. In my case I need to use the "change" event, I can I make the event fire more than once in the same element?

Example html :

<label class="btn btn-info">
    <input type="radio" name="options" id="optiond1" class="btndelayhours"  autocomplete="off" d="9"> NEVER ARRIVED 
</label>

<label class="btn btn-info">
    <input type="radio" name="options" id="optiond1" class="btndelayhours"  autocomplete="off" d="5"> some toher info
</label>

JS :

$(".btndelayhours").on('change', function(){

Do some stufff...}..

You've to use click() event instead in this case since the change() event will be triggered just in the case when the value change :

$(".btndelayhours").on('click', function(){
    //Your code 
})

Hope this helps.

 $(".btndelayhours").on('click', function(){ console.log($(this).parent().text().trim()+' clicked'); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="btn btn-info"> <input type="radio" name="options" id="optiond1" class="btndelayhours" autocomplete="off" d="9"> NEVER ARRIVED </label> <label class="btn btn-info"> <input type="radio" name="options" id="optiond1" class="btndelayhours" autocomplete="off" d="5"> some toher info </label> 

on('change' will only fires when value changes,

you should use on('click' instead

 $(".btndelayhours").on('click', function() { console.log(this.id, this.checked); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="btn btn-info"> <input type="radio" name="options" id="optiond1" class="btndelayhours" autocomplete="off" d="9">NEVER ARRIVED</label> <label class="btn btn-info"> <input type="radio" name="options" id="optiond2" class="btndelayhours" autocomplete="off" d="5">some toher info</label> 

It will not fire again if you click the same radio button again. Because you wrote the change event. When you click again the same radio button the state of the radio button is not changing. If you really need to do this, try click event. See the plunker https://plnkr.co/edit/ZbnyajwywN71jZd2xEvc?p=preview

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM