Estoy usando Javascript para manejar una ventana emergente de Bootstrap, pero el Javascript dentro del LinkButton (que está dentro de un repetidor) no se activa. Creo que tiene algo que ver con la forma en que configuro Javascript para el popover. ¡Agradecería algo de ayuda!
Margen
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" id="ProjectCardButton" type="button" data-toggle="popover"> Project Dropdown (WIP) </button> <div class="ProfilePopupModal col-md-4 clearfix d-md-block" id="ProjectCard"> <div class="card mb-2"> <div class="card-body" style="width: 200px; padding-left: 0 !important;"> <div class="row"> <div class="col-lg"> <asp:Repeater ID="projectDropdown" runat="server"> <ItemTemplate> <asp:LinkButton runat="server" Text="Link button" OnClientClick="selectProject() {alert('You pressed Me!');}; return false;" /> </br> </ItemTemplate> </asp:Repeater> </div> </div> </div> </div> </div> </div>JavaScript
var options = { html: true, placement: 'bottom', content: function () { return $('#ProjectCard').html(); } } $("#ProjectCardButton").popover(options);CSS
.ProfilePopupModal { visibility: hidden; position: fixed; overflow-x: hidden; }Pude resolverlo gracias a shrewmouse en stackoverflow. Su respuesta se puede encontrar aquí: enlace
Tuve que cambiar el contenido de la ventana emergente en mi javascript para que incluyera los datos enlazados dinámicamente. Hice esto eliminando .html().
Anteriormente, solo devolvía el html de mi contenido emergente, por lo que los enlaces no funcionaban. El otro código arriba y debajo del popover (como se muestra a continuación) está diseñado para manejar la ocultación y visualización del contenido del popover en sí mismo que vive en el DOM.
$("#ProjectCard").hide(); $('#ProjectCardButton').popover({ html: true, placement: 'bottom', container: '.bootstrap-iso', content: $('#ProjectCard') }); $('#ProjectCardButton').popover('show'); $('#ProjectCardButton').popover('hide'); $("#ProjectCard").show();