.submit no funciona si ajax actualizó el objeto de vinculación

3 minutos de lectura

I Sistema de comentarios AJAXificado así que cuando Post Comment Se hace clic en el botón Ajax, se realiza una llamada en lugar del envío del formulario original. Funciona bien hasta que actualizo la página con el botón de envío de comentarios de ajax. Digamos que solo actualizo el div que contiene la publicación y los comentarios y el botón. Después de eso, el ajax no se activa, sino que se usa la forma original de envío.

El javascript para enviar el formulario parece

jQuery('document').ready(function($){
    var commentform=$('#commentform'); // find the comment form

    commentform.submit(function(){
//  $('#commentform').submit(function(){

traté de usar $('#commentform') en lugar de la variable que no ayudó.

Traté de asignar la variable de formulario de comentarios nuevamente después del éxito de ajax que carga una nueva publicación. Eso tampoco ayudó.

Parte del javascript que carga la publicación a través de ajax.

var $ = jQuery.noConflict();

$(document).ready(function() { 
    $(".mhomepage_item").bind("click", function(){ //bind a click event on a class with name = mhomepage_item

    $.ajax({
            type: "POST",
            url: mhomepage.ajax_url,
            data: { 
                action: "get_post", 
                type: $(this).attr('type'), 
                current_post_id: $('#post_container').attr('current_post_id')
                },
            success: function(response) {
                response_from_json = JSON.parse(response);

                $('#content_container').html(response_from_json['html']);
                commentform=$('#commentform');
     }
    });

    // }
});

¿Alguien podría sugerir cómo hacer el bind para formar el botón de envío permanente incluso después de que el botón se vuelve a cargar a través de ajax?

  • Cualquier HTML que acompañe esto sería bastante útil…

    – Chris Kempen

    13 oct.

submit no funciona si ajax actualizo el objeto de vinculacion
Khanh A

Prueba con el delegado de eventos:

$(document).on("submit","#commentform",function(){
    // action to perform after submit intent
});

Al usar el controlador de eventos delegado, puede manejar elementos creados dinámicamente fácilmente sin tener que hacer algo como volver a vincular el controlador de eventos.

También puede vincular el evento al body o el contenedor más cercano que está disponible cuando llamas a la función para evitar burbujear más niveles a document. También puedes probar esto en tu caso:

jQuery(document).ready(function($){
    $('#content_container').on("submit","#commentform",function(){
        // action to perform after submit intent
    });
});

Documentación

  • +1 Estaba a punto de publicar mi respuesta así. Solo una nota : .on() requiere jQuery 1.7+

    – JFK

    13 oct.

  • segunda nota: podrías reemplazar $(document) por $("body") o el selector principal más cercano del formulario.

    – JFK

    13 oct.

  • @JFK: en realidad, #content_container es suficiente. creo

    – Khanh A

    13 oct.


  • Ambos ejemplos funcionan bien. Gracias. ¿Podría explicar por qué no funcionó antes? Estoy perdido.

    – Radek

    13 oct.

  • @Radek: su código usa un controlador de eventos directo. El controlador de eventos se adjunta directamente a su #commentform, cuando usted llama $('#content_container').html, sus objetos DOM se reemplazan por otros nuevos que no tienen controladores de eventos.

    – Khanh A

    13 oct.

submit no funciona si ajax actualizo el objeto de vinculacion
ojos de serpiente

De acuerdo con: enlace jQuery haga clic en un enlace después de la llamada AJAX

Debe enlazar un botón para hacer clic/enviar evento en success llamar de vuelta.

puedes hacer:

success: function(response) {
      response_from_json = JSON.parse(response);

      $('#content_container').html(response_from_json['html']);
      commentform=$('#commentform');

      $('#commentform').bind("submit", function() { ... } );
}

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad