intento cargar con ajax dentro del siguiente subcontenedor si hago clic en cargar Clase antes. Pero no funciona. ¿Por qué? Si hace clic en el siguiente subcontenedor de clase de carga, cambie el color pero no obtengo contenido nuevo.
Mi código HTML.
<body> <div id="wrapper"> <div class="load" data-id="1"></div> <div class="subcontainer"></div> <div class="load" data-id="2"></div> <div class="subcontainer"></div> <div class="load" data-id="3"></div> <div class="subcontainer"></div> </div> </body>mi guion
<script> $(document).on("click", "#wrapper > .load", function () { var abc = $(this).next(".subcontainer").css({"background-color", "red"}); // It works. var name_id = $(this).data("id").val(); $.ajax({ url: "folder/get-data.php", method: "POST", data: {id: name_id}, dataType: "html", cache: false, success: function (result) { $("#wrapper > .subcontainer").html(result); // Do not work. }, }); }); </script>Está reemplazando el contenido de respuesta ajax en todos los subcontenedores en lugar del siguiente subcontenedor
<script> $(document).on("click", "#wrapper > .load", function() { var that = this; var abc = $(this).next(".subcontainer").css({ "background-color", "red" }); // It works. var name_id = $(this).data("id").val(); $.ajax({ url: "folder/get-data.php", method: "POST", data: { id: name_id }, dataType: "html", cache: false, success: function(result) { $(that).next(".subcontainer").html(result); }, }); }); </script> Y reemplace esta línea también $(this).data("id").val() con $(this).data("id")
También puede usar el método .nextAll() para obtener los elementos necesarios
Puedes usar cualquiera de los siguientes códigos,
1) $(that).nextAll(".subcontainer")[0].innerHTML = result
2) $($(that).nextAll(".subcontainer")[0]).html(result)