Question

我对jQuery和/或jQuery UI对话框有一个非常烦人的问题。

点击一个特殊的链接后会弹出一个模态对话框，其中包含一些加载的内容（ajax），在这个加载的内容中是新的链接/按钮，它们在同一个div框中加载它们的URL，所以对话框仍然被加载，但是然后用新内容。问题是，如果您链接到该链接（在新加载的对话框内和最近重新加载的网站上）它可以正常工作，但是第二次单击它会加载网址两次，第三次加载4次。 ..随着对话框中加载的每个新链接，它呈指数级增长。我用$ _SESSION中存储的计数器测试了这个。

这是Javascript代码：

var somedialog = $('<div></div>').dialog({
  autoOpen: false,
  resizable: false,
  modal: true,
  /*show: 'fade',
  hide: 'puff',*/
  closeOnEscape: true,
  close: function(){
  }
 });
 function openInDialog(url, title, width, height)
 {
  somedialog.empty();
  somedialog.dialog("option", "width", width);
  somedialog.dialog("option", "height", height);
  somedialog.dialog("option", "title", title);
  somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest)
   {
    somedialog.dialog('open');
   }
  );

  //somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest){
  // dialogdiv.somedialog('open');
  //});
 }

 $('a.ajaxBuyItemDialog').on('click',function(){
  openInDialog(this.href, this.title, 400, 300);
  //prevent the browser to follow the link
  return false;
 });

似乎其他人也有这个问题，但这不是一个非常有效的讨论：https://stackoverflow.com/questions/6471360/jquery-load-after-load-repeated-results-problem

感谢您的帮助！

编辑：这是代码的一部分，该代码位于加载的脚本中：

$("#_BUYITEM_FORM").live('submit', function(){
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response){ // on success..
            $("#_BUYITEM_CONTENT").html('<p class="AjaxLoaderImg"><span>Einen Moment bitte...</span></p>');
            $("#_BUYITEM_CONTENT").html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

没有它，我无法用新内容刷新对话框。

Answer 1

在点击的每个$('a.ajaxBuyItemDialog')目标网页中，您的javascript代码似乎都会被复制。在每次点击时再次将该脚本添加到对话框会导致事件被多次触发。

Answer 2

如果您多次重新加载脚本，则每次都会添加一个新的提交处理程序，因为您使用的是live（）。

live（）会将处理程序委托给文档，因此应该只调用一次，或者在每次脚本加载之前需要调用die（）。

如果要摆脱使用live（），可以将提交处理程序移动到load（）的成功回调，并使用submit（）而不是live（）。如果替换原始表单...原始的submit（）事件处理程序也将消失

Answer 3

“脏”解决方案

function watchBuyItemForm(){
        $("#_BUYITEM_FORM").submit(function(){
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response){ // on success..
                    somedialog.html(ajaxLoader);
                    somedialog.html(response); // update the DIV
                    watchBuyItemForm();
                }
            });
            return false; // cancel original event to prevent form submitting
        });
    }

对话框中的Jquery加载以指数方式重复

3 个答案: