Rare behavior with multiple input type="time" added dynamically

Question

Rare behavior with multiple input type="time" added dynamically

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am using the control input type="time" several times dynamically, I begin to describe my problem. When I add a control input type="time" for the first time, everything works correctly, the problem is when I add 2 or more controls input type="time" , the property focus focuses only on the last element input type="time" added, not having access to the elements previously added, this is the code I use:

// Funcion que agrega controles input type="time" dinamicamente
function check(obj) {

if( $(obj).is(':checked')){    
    var row = $(obj).val();        

    var cont = $('#Matinees tr.selected').find("td:nth-child(3) input[type*='time']").length;
    if(cont == 0){
        cont = row+'2';
    }else{
        cont = row+''+cont;
    }

    var del = '<img id="delHour'+cont+'" class="img-thumbnail img-responsive" src="img/remove-button.svg" width="25" height="25">'; 

    $('<div id="div'+row+'" class="row" style="position: relative;">'+
        '<div class="col-md-5" style="display:inline-block;width:210px;">'+
          '<div class="wrap-input100 validate-input" data-validate="You must put an hour">'+
          '<input class="input100" type="time" id="time'+cont+'" name="time'+cont+'" min="9:00" max="22:00" />'+
          '<span class="focus-input100" data-placeholder="Escoge una hora"></span></div>'+
        '</div>'+
        '<div class="col-md-3" style="display:inline-block; padding-top:15px; float: right; ">'+
            del +
        '</div>'+
     '</div>').appendTo("#container"+row+"");  

    setTimeout( function() {
        $(obj).prop('checked', false);
    }, 800 );

 }

 return true;

}  

[Añado una imagen][1]

jquery html

asked by jR10sMX 28.10.2018 в 01:06

source

2 answers

Pass data between windows with javafx Help with google maps and bootstrap modals

score 0 · Answer 1

I think the problem is that all the INPUTs have the same ID. Test to change the fourth line for this one, so you can find the INPUTs and give them another name:

var cont = $("#container" + row + " input[type='time']").length;

Good luck!

score 0 · Answer 2

I solved it,;) what affected was a function created by me, comment on two lines that were creating the weird behavior, I leave the code and greetings !!!

 // Put the CLASS for row selection in the table #Matinees
$("#Matinees").on('click','tr',function(){
    // // Put the CLASS for row selection in the table #tableCinemaShows, also put focus and select on quantity input text
    $(this).addClass('selected').siblings().removeClass('selected');
//   Aquí     $(this).find("td:nth-child(3) input[type='time']").focus();
//   Aquí     $(this).find("td:nth-child(3) input[type='time']").select();
});