Button click function not working in jQuery

Question

So I'm developing a website for a medical clinic and they asked me to add a button beneath every doctor to make an appointment.

this is what i have for the doctors section

for (var i = 0; i < 3; i++) {
    $('#get_medicos').append(
        '' +
            '' +
                '' +
                '' + 
                '' +
                    '' + medico[i].nome +'' +
                    '' + medico[i].especialidade + '' +
                    'Marcar consulta' +
                '' +
            '' +
        ''
    );
}

The then code for the click function (that doesn't work):

$('#marcar').click(function() {
    var offset = $('#marcacao').offset();
    $('html, body').animate({
        scrollTop: offset.top-100,
        scrollLeft: offset.left
    }, 1000);
    $('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(medico[i].especialidade);
    $('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(medico[i].nome);
    console.log('test');
});

This is all inside a $(document).ready(function() {}); and what should do is when i click that button beneath the doctor, should go up to the form and fill the doctor's name and specialty... but it seems it's not working for some reason... this is a copy of other click functions in the code, but they seem to work fine.

HTML form:

user_7380779 · Answer

if you create the button after your event, you could have problem so, use the delegate version of click:

$('div').on('click', 'a', (function()....

and better put an id on the ancestor div:


another thing, with the loop you will have same id more time in your html??its no good.
so you'll have to rebuild your program logic...and bind the event with the right button (use a common class) it will be better than an id

user_4192869 · Answer

You have to add the element and register the event for the element. Here is the fiddle which works for you

https://jsfiddle.net/0q3kpyfv/

Your sample HTML

Sample jquery code Notice I have added the data-val attribute to the added anchor tag which will help you to get the information and perform the logic based on which button is clicked. you can pass dynamic data to data-val attribute and use it in click event.

$(document).ready(function() {

var sampleString = "";
var medico = [{'especialidade':'speciality 0','nome':'Doctor 0'},{'especialidade':'speciality 1','nome':'Doctor 1'},{'especialidade':'speciality 2','nome':'Doctor 2'}]

for (var i = 0; i < 3; i++) {

var doctorData = medico[i];

    $('#get_medicos').append(
        '' +
            '' +
                '' +
                '' + 
                '' +
                    '' + medico[i].nome +'' +
                    '' + medico[i].especialidade + '' +
                    'Marcar consulta'+i+'' +
                '' +
            '' +
        ''
    );
};



$('#get_medicos').on('click','a',function(event){

var elementClicked = event.target;
var doctorEspecialiadade = $(elementClicked).data('doctor-especialiadade');
var doctorName = $(elementClicked).data('doctor-nome');


 $('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(doctorEspecialiadade);
    $('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(doctorName); 

})

});

user_1694116 · Answer

If you bind the event to the parent element, and filter by the children, you can listen to any new elements that are added, doesn't matter how many.

const $addNew = $('.js-add-new')
const $container = $('.container')
let count = 0

$addNew.on("click", () => {
  count += 1
  $container.append(`
    
      
    
  `)
})

$container.on("click", "button", (event) => {
  console.log(event.currentTarget)
})

A working example: https://codepen.io/alexmccabe/pen/jOrXZxj?editors=1111

user_7032600 · Answer

The button click is working. Here is a fiddle showing it does:

https://jsfiddle.net/bradberkobien/qL4m10y6/3/

There must be an issue with the code that comes before the console.log("test") line within the click. I would use the debugger to help you with that.

Button click function not working in jQuery

4 Answers