CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Jjsg08
Jjsg08

Reputation: 124

Dynamically generated button, not open modal Bootstrap 3

I'm using bootstrap 3 and dynamically creating buttons with a elements of the type

<a class="btn btn-primary" data-id="1" data-toggle="modal" data-target=".ver-persona">
   <i class="fas fa-search"></i> Ver
</a>

My script to generate the button is:

let boton_elem = $('<a>');
boton_elem.addClass('btn');
for(let clase_btn in botones[boton].clases){
    boton_elem.addClass(botones[boton].clases[clase_btn]);
}
for(let data_btn in botones[boton].datas){
    boton_elem.data(botones[boton].datas[data_btn][0],botones[boton].datas[data_btn][1]);
}
if(botones[boton].icon !== undefined){
    let icon_elem = $('<i>');
    for(let clase_icon in botones[boton].icon.clases){
        icon_elem.addClass(botones[boton].icon.clases[clase_icon]);
    }
    icon_elem.appendTo(boton_elem);
}
if(botones[boton].valor.length > 0){
    boton_elem.html(boton_elem.html() + ' '+ botones[boton].valor);
}
if(botones[boton].listens !== undefined){
    for(let listen in botones[boton].listens){
        $('#'+tabla).on(botones[boton].listens[listen].evento,botones[boton].listens[listen].botones[boton].listens[listen].funcion);
    }
}
boton_elem.appendTo(columna_elem);

The buttons are created perfect, the data is in it, and all parameters are applied correctly, but the .ver-persona modal not open with the generated button, all of buttons loaded with the page works perfectly and the modal opens normally.

Exist any way to refresh or reassing bootstrap listeners when a button is created? or some function to get button advised to open the modal?

I make this fiddle for reference: Live example

Thanks in advance.

Upvotes: 0

Views: 162

Answers (1)

Nimitt Shah
Nimitt Shah

Reputation: 4587

For dynamic content, you can add data attributes using .attr of jQuery. So instead of boton_elem.data(boton.datas[data_btn][0],boton.datas[data_btn][1]); you can re-write it as boton_elem.attr("data-"+boton.datas[data_btn][0],boton.datas[data_btn][1]);

You can test it here

Upvotes: 1

Related Questions