Question

保护程序。你好像开裂一样。当我需要修理时，我来找你我有一个用户提交的评论系统，它使用jQuery对话框在用户提交表单之前确认内容。

第一次出现没问题。对话框触发正常，表单提交。当我尝试再次发布时，ajax调用失败，对话框不会触发，并提交默认表单。

对话框绑定在表单的成功ajax创建中，所以据我所知，它应该是绑定的，但我肯定错过了一些东西。

这是代码。

第一个ajax调用带来一个表单来发表评论。当成功加载时，我会在用户尝试提交表单时启动要调用的对话框。

// Make the ajax call for the apppropriate content.

$.ajax({
        type: 'Get',
        url: 'a/url/to/process/form',
        cache: false,
        beforeSend: function() {
        },
        success: function(data) {
            $('#commentBox_' + id).html(data).fadeTo('fast', 100);
            $('#' + oId).addClass('remove').removeClass('respond').html('Close');
            // Destroy the instance if it has already been called.
            if(CKEDITOR.instances['comment'])
            {
                delete CKEDITOR.instances['comment'];
            }
            $('#discussionComment_' + id).submit(function() {
            CKupdate()                                            
            });
            // Set the editor.
            CKEDITOR.replace('comment', {toolbar : 'Basic', skin : 'Office2003', height : 250})
            // Set the submit option.
            $('#postComment_' + id).live('click', function() {
                // Warn the user about submitting. Let them review their comment.
                CKupdate() // Update the field with user input content.
                $('.ui-dialog-content').dialog("destroy"); // Get rid of any old dialogs lurking around.
                // Get the content from the form for the confirmation dialog
                var commentTitle = $('#commentSubject_' + id).val();
                var commentBody = CKEDITOR.instances['comment_' + id].getData();
                // Build the new dialog.
                var NewDialog = $('<div>You are about to submit your comment. Verify before submitting.<hr /><h4>' + commentTitle + '</h4><div>' + commentBody + '</div></div>');
                $(NewDialog).dialog({
                    modal: true,
                    title: 'Confirm Post',
                    width: 500,
                    buttons: {
                    'Submit': function() {  
                        commentPost_ajax(id); // Post the form via ajax.
                        $(this).dialog('destroy');
                        },
                    'Edit': function() {
                        $(this).dialog('destroy');
                        return false; // Don't submit the form.
                        }
                    }
                }); 
                return false;
            });// Click to submit form.

        },
        error: function() {
            window.location = "../../post_discussionComment.html?dId<%=dId%>&amp;id=" + id
        }
    }); 
// Stay here. We're just starting to have fun.
    return false;

这是ajax帖子的功能。

function commentPost_ajax(id) {

// Just close and submit.
$('#discussionComment_' + id).ajaxSubmit({
    beforeSend: function() {
        $('#discussionComment_' + id + ' input:submit').html('Sending...');
        $('#newEntry').attr('id', '');
    },
    success: function(data) {
        $('#commentBox_' + id).after(data);
        $('#discussionComment_' + id).remove();
        $('#discussionComment_' + id).hide('puff', function() { $(this).remove() }, 'fast');
        $('#content_' + id + ' a.remove').removeClass('remove').addClass('respond').html('Respond');
        $('.expand').show();
        window.location + $('#newEntry');
        $('#newEntry').children().effect("highlight", {}, 3000);
    },
    error: function () {
        alert('There was a problem posting your comment. Please try again.');
    }
 }); // Form submit 
}

任何帮助将不胜感激。我已经仔细阅读了很多其他问题，但没有人直接对此说过话。如果他们这样做，我找不到他们。

Answer 1

如果我正确理解了场景并假设Ohgodwhy提到的双重删除问题已得到解决，那么看起来问题就在于“（...）提交默认表单”

假设当前代码中没有发生其他JS错误，我也遇到了这种情况，第二次显示对话框时会提交默认表单。我通过在关闭对话框时从DOM中删除对话框div来修复它，如下面的代码所示。

以下代码是此问题中提交的原始代码的变体：

   $('#postComment').live('click', function() {
      var NewDialog = $('<div></div>');
      $(NewDialog).dialog({
         modal: true,
         title: 'Confirm Post',
         width: 500,
         buttons: {
            'Submit': function() {   
               $(this).dialog('close');  
            }
         },
         close: function(event, ui) { 
            $(this).dialog('destroy');
            $(this).detach();
            $(this).remove();
         }
      }).dialog('open');

Answer 2

我正在看一些与我正在处理的代码相同的问题。

ajax在第一次使用时正常工作，但在第二次使用时甚至不会触发。

我的解决方法是将处理代码放入如下函数中：

function my_do_processing( myitem ) {
  // set up variables using myitem.data('...') or standard jquery
  var my_response = $.post(ajaxurl, { variables } );
  my_response.done( function( data ) {
    $('#container').html(data);
    $('a.eventtrigger').bind('click', function() {
      my_do_processing($(this));
      return false;
    });
 });
};


$('a.eventtrigger').click(function() {
  my_do_processing($(this));
  return false;
});

这将使用类eventtrigger在锚点上设置初始单击事件，然后在触发时，它会将同一事件绑定到通过ajax输入到文档中的代码。

它适用于我......但你的里程可能会有所不同。

第二次调用jQuery对话框在使用ajax创建的表单后不会触发

2 个答案: