如果由ajax刷新了绑定对象，.submit将不起作用 [英] .submit doesn't work if the bind object was refreshed by ajax

问题描述

我 AJAXified评论系统，所以当单击Post Comment按钮时，ajax呼叫而不是原始表单提交.在我用ajax的评论提交按钮刷新页面之前，它可以正常工作.假设我只刷新包含帖子，评论和按钮的div.之后，不触发ajax，而是使用原始的提交方式.

I AJAXified commenting system so when Post Comment button is clicked ajax call is made instead of the original form submission. It works fine till I refresh the page with the comment submit button by ajax. Let's say that I only refresh the div that contains the post and comments and the button. After that the ajax is not triggered rather the original way of submitting is used.

提交表单的javascript如下

The javascript to submit the form looks like

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

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

我尝试使用$('#commentform')而不是无济于事的变量.

I tried to use $('#commentform') instead of the variable which didn't help.

我尝试在成功加载新帖子的ajax之后再次分配commentform变量.那也没有帮助.

I tried to assign the commentform variable again after the successful ajax that loads new post. That didn't help either.

通过ajax加载帖子的部分javascript

Part of the javascript that loads post via 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');
     }
    });

    // }
});

有人可以建议即使通过ajax重新加载按钮后，如何使bind表单提交按钮成为永久按钮?

Could someone suggest how to make the bind to form submit button permanent even after the button is reloaded via ajax?

推荐答案

尝试事件委托:

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

通过使用委托事件处理程序，您可以轻松处理动态创建的元素，而不必执行重新绑定事件处理程序之类的操作.

By using delegated event handler, you can handle dynamically created elements easily without having to do something like rebinding event handler.

您还可以将事件绑定到body或调用该函数时可用的最接近的容器 ，以避免将更多级别冒泡到document.您也可以尝试以下方法:

You could also bind the event to the body or the closest container that's available when you call the function to avoid bubbling more levels to document. You could also try this in your case:

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

文档

这篇关于如果由ajax刷新了绑定对象，.submit将不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！