all - Hacer que jquery funcione en función con contenido cargado de AJAX
jquery replace html (7)
Estoy teniendo problemas para que una función de ''clic'' funcione con el contenido cargado de AJAX.
He trabajado con jquery .live antes, pero esta es la primera vez que .on y entiendo que funciona exactamente de la misma manera, por lo que no estoy seguro de por qué tengo problemas.
A continuación se muestra el HTML que da el elemento al que hace clic
<h1>Press & Media</h1>
<div id="back"></div>
<div id="overlay-content">
<span id="edocs" class="tab"></span>
<span id="news" class="tab"></span>
<span id="partners" class="tab"></span>
</div>
A continuación se muestra la función que carga el contenido de AJAX.
$("#overlay-content").on(''click'',''#news'',function() {
var active = 1;
$("#loading").show();
$("#overlay-content").fadeOut(1000, function() {
$.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
$("#loading").hide(400);
$("#overlay-content").empty().append(data).fadeIn(1000);
});
});
});
Esto debería cargar el siguiente HTML
<div id="news-left-panel">
<h4>News Section</h4>
<ul>
<li id="newsID2" class="newsYear">
<p>2012</p>
<ul class="newsMonths" style="display:none">
<li>Jan
<ul class="newsArticles" style="display:none">
<li onClick="newsID(2)">test</li>
</ul>
</li>
<li>Feb</li>
<li>Mar</li>
</ul>
</li>
<li id="newsID1" class="newsYear">
<p>2011</p>
<ul class="newsMonths" style="display:none">
<li>Dec
<ul class="newsArticles" style="display:none">
<li onClick="newsID(1)">Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Ahora el código anterior simplemente no se ejecutará, mostrará cualquier error, etc. en Firebug.
Así que estoy un poco perdido en cuanto a por qué no se ejecuta, la alerta () incluso no se ejecuta.
Noticias-panel izquierdo
year_Month_newsID Año, mes, ID de noticias de sus noticias. Por ejemplo 2012_5_16 , 2012_5_17 etc.
<div id="news-left-panel">
<h4>News Section</h4>
<ul>
<li id="newsID2" class="newsYear">
<p>2012</p>
<ul class="newsMonths" style="display:none">
<li>Jan
<ul class="newsArticles" style="display:none">
<li id="year_Month_newsID">test</li>
</ul>
</li>
<li>Feb</li>
<li>Mar</li>
</ul>
</li>
<li id="newsID1" class="newsYear">
<p>2011</p>
<ul class="newsMonths" style="display:none">
<li>Dec
<ul class="newsArticles" style="display:none">
<li id="year_Month_newsID">Test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Función jquery
$("#news-left-panel ul li").live("click", function(event) {
var news=(this.id).split("_");
var year=news[0];
var month=news[1];
var newsID =news[2];
$.ajax({
type: "POST",
url: ''http://<? echo ROOT; ?>includes/functions.php'',
data: {
year: year,month:month,newsID :newsID
},
error: function(){
$(''#news'').html( "<p>Page Not Found!!</p>" );
// Here Loader animation
},
beforeSend: function(){
// Here Loader animation
$("#news").html('''');
},
success: function(data) {
$(''#news'').html(data);
}
});
});
¿Está seguro de que su llamada Ajax es correcta / está devolviendo el HTML correcto?
Reemplacé $ .get () con setTimeout () (y simplifiqué un poco) aquí: http://jsfiddle.net/q23st/
Parece funcionar, así que sospecho que su $ .get () no está devolviendo lo que se espera que devuelva.
Debería ser más como:
$("#overlay-content").on(''click'', ''#newsID2'', function() {
....
});
O en otras palabras:
$(''.wrapper'').on(''event'', ''.target'', function() {
...
});
Donde .wrapper es un elemento que ya existe (o el documento), y .target es el elemento (s) dentro del contenedor en el que desea ejecutar el evento.
La función en live es básicamente equivalente a:
$(document).on(''event'', ''.target'', function() {
...
});
Primero asegúrese de que está alcanzando el objetivo, intente esto y vea si la alerta muestra:
$(function() {
$(document).on(''click'', ''#news'', function() {
alert(''ok'');
});
});
Si la alerta se muestra al hacer clic en el elemento #news, está bien.
Ahora a esta línea:
$.get("http://<? echo ROOT; ?>includes/functions.php",
Está utilizando la apertura abreviada de PHP, y eso debe estar activado, puede probar
<?php echo ROOT; ?>
Pero lo que es el frack es ROOT, nunca lo vi antes, y no pude encontrar nada en el manual de PHP en ROOT, así que lo probé en mi propio servidor con la versión más reciente de PHP y obtuve un error porque no existe "ROOT" en su lugar, asumió que era una cadena y solo hizo eco de "ROOT", por lo que su enlace se vería así:
$.get("http://ROOTincludes/functions.php",
Es una variable que usted mismo ha definido en algún lugar, debe comenzar con una señal de dólar, si es algo que ha definido con define() , asegúrese de que esté configurado correctamente y si está usando algo como $_SERVER[''DOCUMENT_ROOT'']; eso no siempre es algo a lo que se puede acceder en javascript, ya que normalmente será una carpeta que es más alta que su webroot, y no se puede acceder en el lado del cliente sino solo en el lado del servidor.
Además, la forma en que lo has escrito, comenzando con http:// debería ser un nombre de dominio. Intente abrir la fuente de vista en su navegador y encuentre su función ajax y vea qué ROOT realmente produce, ya que la salida final será visible en la fuente, y si se configura usando define () en un archivo de configuración incluido, etc., puede ver que fue configurado correctamente
Su javascript también tendría que estar dentro de un archivo PHP para que PHP se ejecute, o tendría que modificar la configuración de su servidor para ejecutar archivos JS a través de PHP.
En mi opinión, solo usar una ruta y un nombre de archivo es la forma correcta de hacerlo, intente esto y preste atención a la consola (F12):
$(document).on(''click'',''#news'',function() {
var active = 1;
var XHR = $.ajax({
type: ''GET'',
url : ''/actualpath/includes/functions.php'',
data: { pressmediaNews: active }
}).done(function(data) {
console.log(data);
}).fail(function(e1, e2, e3) {
console.log(''error : ''+e1+'' - ''+e2+'' - ''+e3);
});
$("#loading").show();
$("#overlay-content").fadeOut(1000, function() {
XHR.done(function(data) {
$("#overlay-content").empty().append(data).fadeIn(1000);
$("#loading").hide(400);
});
});
});
Utilice un delegado:
$(''#overlay-content'').on(''click'', ''#newsID2'', function() { });
Esto vinculará el evento en #overlay-content y verificará si hay eventos burbujeados si se originaron desde #newsID2 .
Como nota al margen: tienes un error tipográfico en el controlador de eventos (los chikdren deben ser children ) y realmente debes deshacerte de este evento en línea onClick feo.
Ya que dijo que ha trabajado anteriormente con .live (), ¿el problema aquí podría ser que está tratando de enlazar su clic en algo que adjunta al documento antes de agregarlo?
Cuando usas en vivo, maneja este tipo de cosas automáticamente, pero cuando no usas en vivo, generalmente las cosas tienen que existir en la página antes de vincularles ningún evento. Si agrega algo con AJAX, no puede configurar eventos de clic para esas cosas antes de cargarlos con AJAX. Cuando usas .live () puedes hacerlo antes de tiempo.
Lo haría así:
$("#overlay-content").on(''click'',''#news'',function() {
var active = 1;
$("#loading").show();
$("#overlay-content").fadeOut(1000, function() {
$.get("http://<? echo ROOT; ?>includes/functions.php", { pressmediaNews: active }, function(data) {
$("#loading").hide(400);
$("#overlay-content").empty().append(data).fadeIn(1000);
//put your delegate/call/function,etc here
});
});
});
http://bugs.jquery.com/ticket/11203
Frase clave
Si se está inyectando nuevo HTML en la página, seleccione los elementos y adjunte los controladores de eventos después de colocar el nuevo HTML en la página.
Para trabajar con este escenario, intente vincular al objeto de documento con un parámetro selector:
$(document).on(''click'',''#news'',function() {...}