Esta es la primera vez que uso ajax con jquery y soy nuevo en jquery tengo una estructura
$(document).ready(function(){ data_url = $('.lazy_content').attr("data-url"); data_id = $('.lazy_content').attr("data-target-id"); $.ajax({ url: data_url, type: "POST", beforeSend: function() { $(".loaderDiv").show(); $("#" + data_id).html(""); }, success: function(data) { $(data).each(function(index, el) { $(".loaderDiv").hide(); $("#" + data_id).html(data); }); } }); }); <div class="lazy_content" data-url="/ajax/yorumlar/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-1"> <h4 class="tur-main-baslik">COMMENTS</h4> <div id="ajax-content-1"></div> </div> <div class="lazy_content" data-url="/ajax/trustyou/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-2"> <h4 class="tur-main-baslik section-head">POSTS</h4> <div id="ajax-content-2"></div> </div> como puede ver, tengo data-url datos, esta URL de datos tiene mi archivo ajax y obtengo mi archivo ajax, pero después de cargar la página, nada funciona ... ¿qué pasa con mi código?
Dependiendo de dónde se encuentre el javascript en el HTML, es posible que el DOM no se haya cargado en el momento en que ejecuta el script.
encapsular su javascript dentro de la función jquery 'en DOM cargado' ( $(document).ready( function() { ) solucionará ese problema, codifique de la siguiente manera.
$(document).ready( function() { $('.lazy_content').on("load", function() { data_url = $(this).attr("data-url"); data_id = $(this).attr("data-target-id"); $.ajax({ url: data_url, type: "POST", beforeSend: function() { $(".loaderDiv").show(); $("#" + data_id).html(""); }, success: function(data) { $(data).each(function(index, el) { $(".loaderDiv").hide(); $("#" + data_id).html(data); }); } }) }); });Pon tu código dentro de $(documento).listo()
y creo que necesitas cambiar tu código como:
$(document).ready(function() { data_url = $('.lazy_content').attr("data-url"); data_id = $('.lazy_content').attr("data-target-id"); $.ajax({ url: data_url, type: "POST", beforeSend: function() { $(".loaderDiv").show(); $("#" + data_id).html(""); }, success: function(data) { $(data).each(function(index, el) { $(".loaderDiv").hide(); $("#" + data_id).html(data); }); } }) }) O iterar con cada clase, es decir, .lazy_content
$( document ).ready(function() { $('.lazy_content').each(function(){ data_url = $(this).attr("data-url"); data_id = $(this).attr("data-target-id"); $.ajax({ url: data_url, type: "POST", beforeSend: function() { $(".loaderDiv").show(); $("#" + data_id).html(""); }, success: function(data) { $(data).each(function(index, el) { $(".loaderDiv").hide(); $("#" + data_id).html(data); }); } }) }) })Cargar evnet solo se puede usar en la ventana, elemento img.
Si usa la función de carga de Jquery, puede usar la función de devolución de llamada.
$("#target").load("append.html",function(){ // callback });de otra manera, agrega scripts debajo del html de destino.