Question

我正在开发一个模仿某些“postit”功能的网站。当用户双击浏览器窗口时，弹出一个表单（可见），允许在输入文本中引入消息。通过单击表单按钮，将创建一个postit元素（div.postit）并显示在正文上（在用户最初单击的位置）。 div.postit包含带有消息的div.msg和带有“x”的另一个div.close，允许通过点击“x”关闭/删除帖子（div.postit -parent div-从身体中删除。）

到目前为止一切顺利。但是，当用户再次双击窗口并通过单击表单按钮创建新的postit时，不仅会显示新的div.postit，还会显示前一个postit（已从正文中删除）。这是为什么？

这是我的代码的简化版本。只有一个html表单最初被CSS隐藏，双击窗口时可见：

// Event handler dblclick on browser window: Form is made visible
function ondblclickHtml(event) {
  var x = event.clientX;
  var y = event.clientY;

  // Show form (fade in)
  $('form').fadeIn(1000);
  $('form').removeClass('hidden');

  // Pass (x, y) arguments to event handler wrapped inside an object
  $('input#nueva-nota').on('click', {x: x, y: y}, onclickButton);
} 


// Event handler for onclick form button
function onclickButton(event) {

  $('form').fadeOut(1000); // Form fades out

  var msg = $('input#note').val();
  var pos = [event.data.x, event.data.y]; // Retrieve the coordinates
  displayPostIt(msg, pos);
} 

function displayPostIt(msg, pos) {
  var $divPostIt = $('<div class="postit"></div>');
  var $closeDiv = $('<div class="close">x</div>');
  // Bind click event on close div
  $closeDiv.on('click', onclickCloseDiv);
  var $msgDiv = $('<div class="msg">' + msg + '</div>');
  $divPostIt.css({'left': pos[0], 'top': pos[1]});
  $divPostIt.append($closeDiv);
  $divPostIt.append($msgDiv);
  $('body').append($divPostIt); // Finally, append the PosIt div to the body
}

function onclickCloseDiv(event) {
  console.log("onclickCloseDiv ...");
  var divPostIt = $(this).parent();
  divPostIt.remove();
}

Answer 1

正如@Avavt已经评论过，您的问题是每次用户双击窗口/正文时，您都会将新的单击事件处理程序（以及位置信息）绑定到按钮。因此，即使您删除第一个帖子然后再次双击主体，您的第一个单击处理程序也将被执行（并且它将具有旧位置信息）以及具有新位置信息的新事件处理程序。这就是你添加2 div.postit的原因。如果你第三次双击身体，将会有3 div.postit个被添加，等等。

解决方案是删除要作为点击事件数据传递的pos依赖项。这样，您只能绑定一次Click事件处理程序。

这是一个示例。我将pos数据存储在隐藏字段（input#pos）中，然后从displayPostIt()将其读回。

Working JSFiddle

$(function(){
  $('input#nueva-nota').on('click', onclickButton);
  $(document).on('dblclick', ondblclickHtml);
})

// Event handler dblclick on browser window: Form is made visible
function ondblclickHtml(event) {
  var x = event.clientX;
  var y = event.clientY;

  // Show form (fade in)
  $('form').fadeIn(1000);
  $('form').removeClass('hidden');
  $('input#note').focus();

  $('input#pos').val(JSON.stringify({'left': x, 'top': y}));
} 


// Event handler for onclick form button
function onclickButton(event) {

  $('form').fadeOut(1000); // Form fades out

  var msg = $('input#note').val();
  displayPostIt(msg);
} 

function displayPostIt(msg) {
  var $divPostIt = $('<div class="postit"></div>');
  var $closeDiv = $('<div class="close">x</div>');
  // Bind click event on close div
  $closeDiv.on('click', onclickCloseDiv);
  var $msgDiv = $('<div class="msg">' + msg + '</div>');
  var pos = JSON.parse($('input#pos').val());
  $divPostIt.css(pos);
  $divPostIt.append($closeDiv);
  $divPostIt.append($msgDiv);
  $('body').append($divPostIt); // Finally, append the PosIt div to the body
}

function onclickCloseDiv(event) {
  console.log("onclickCloseDiv ...");
  var divPostIt = $(this).parent();
  divPostIt.remove();
}

仍然显示JQuery删除的元素

1 个答案: