Question

i have this markup

<select id="helpamount" name="helpamount"><?= get_texto_clave('amount')?>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="-1" class="convertoinput">more</option>
</select>

and this code to try to convert it to an input

$('body').on('click','.convertoinput',function(){
    $(this).parent().after('<input type="number" id="'+$(this).parent().attr('id')+'" name="'+$(this).parent().attr('id')+'" value="" placeholder="Especifica un valor numerico" /> ');
    $(this).parent().remove();
});

Any idea why this is only working in firefox?

Answer 1

Cross browser ->

$('body').on('change','#helpamount',function(){
    if($(this).val() == -1){
        $(this).after('<input type="number" id="'+$(this).prop('id')+'" name="'+$(this).prop('id')+'" value="" placeholder="Especifica un valor numerico" /> ');
        $(this).remove();
    }
    $('body').off('change', '#helpamount');
});​

jsFiddle example.