El menu desplegable Bootstrap no funciona después de la presentación inicial del formulario ajax

Tengo un menu desplegable en mi página, manager.php , aquí. Perdón por el formateo – bootstrap .:

  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> <!-- Bootstrap Dropdown Enhancements--> <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script> <link rel="stylesheet" href="../../css/dropdowns-enhancement.css"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button> <ul id="searchBy" class="dropdown-menu" role="menu"> <li class="disabled"><a href="#">Search By...</a></li> <li><a href="#">cost</a></li> <li><a href="#">name</a></li> </ul> </div> </div> </div> </div> <div id="everything"> </div> 

Este código funciona bien cuando cargo manager.php directamente y el menu desplegable se inicializa, pero no es así como necesito que el código funcione.

El usuario comienza en return.php ; esta página recostack un montón de datos del usuario y los devuelve a manager.php .

Una vez que el usuario selecciona hacerlo en return.php , este código se ejecuta:

 $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); } }); 

La llamada ajax funciona correctamente y carga los datos devueltos desde manager.php en everything div. Pasa los datos como se esperaba. Lo único que NO funciona al cargar manager.php en el DIV es el menu desplegable. Necesito entender lo que estoy haciendo mal para causar esta funcionalidad, así que puedo evitar hacerlo en el futuro.

Debe restablecer manualmente el menu desplegable después de haber cargado los datos en todo div. Modifiqué tu llamada AJAX para mostrarte dónde poner la llamada.

 $.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); $('#searchBy').dropdown(); } }); 

La carga dinámica que estás haciendo no hace que el DOM se vuelva a cargar obligando a reiniciar el menu desplegable. Una vez que hayas completado la llamada AJAX, puedes restablecer el menu desplegable de arranque manualmente llamando a .dropdown(); .

EDITAR

Generalmente, las funciones de arranque de las características se configuran usando una llamada $( document ).ready() . Esta function se ejecuta una vez, después de que se haya cargado el DOM y solo después de que el DOM se haya cargado por completo. Dado que manipulas el DOM, no estás causando que la function se active nuevamente, y necesitas activar manualmente la function que necesitas.

También desea cargar su incluye solo una vez en cada página. Necesitan hacerlo en manager.php para que la function esté disponible cuando ingrese a su método de éxito. Sugeriría usar una plantilla para su proyecto para que pueda administrar todas sus inclusiones en un solo lugar. Además, si usa manager.php como una página para include en otra página, está bien si no tiene la reference a las piezas JavaScript, ya que no quiere que los usuarios accedan a ese componente por sí mismo.

La recarga que está haciendo parece forzar que el contenido se vuelva a agregar a la página, forzando así la ejecución de la llamada $( document ).ready() en el file incluido para que se vuelva a ejecutar. Puedes hacer esto, pero es muy ineficiente.

no puede inicializar el componente de arranque después de la carga de la página al agregar clasificaciones de arranque. Para hacer esto, debes inicializarlo tú mismo

Para inicializar un menu desplegable escribe este código

 $('.dropdown-toggle').dropdown(); 

después

  $('#everything').html(data); 

para más detalles: http://getbootstrap.com/javascript/#dropdowns

Así que no estoy seguro de por qué esto funciona, pero tiene hasta ahora:

Modifiqué mi llamada ajax para volver a cargar el file .js de bootstrap antes de ejecutar la devolución.

 function reload_js(src) { $('script[src="' + src + '"]').remove(); $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head'); } $.ajax({ ... success:function(data){ reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'); $('#everything').html(data); } }); 

Por la recompensa, ¿alguien me puede explicar:

a.) ¿Por qué necesito forzar la recarga de bootstrap.min.js ?

b.) ¿Por qué es necesario incluso si tengo un enlace a este file en las secciones de ambos files <head> ?

  <!-- Bootstrap --> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../../css/bootstrapstyle.css"> 

También intenté cargarlo en uno, pero no en el otro (así que no lo cargo dos veces) y eso no hace nada.

c.) ¿Por qué funciona esto? ¿Qué está haciendo?

la página cargará el DOM la primera vez. ajax solo actualiza una parte de la página, por lo que los nuevos elementos que agreguen no tendrán una definición definida. necesitas reiniciar como lo hiciste o hacer algo como esto

http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/