Question

抱歉，到目前为止还无法找到解决问题的方法。

我正在为我的老板写一种电子邮件模板编辑器作为一项小任务。

$('a, span').click(function(event){
    var editableElement = $(this);

    if($(this).is('a')){
        event.preventDefault();
    }

    if(editableElement.is('span')){
        processType(editableElement, 'simpleText', modalContent)

当我发送＆＃39; editableElement＆＃39;变量第一次，一切都很好，将对象发送到我的函数，在那里我打开一个模态窗口，其中有一个textarea，如果我输入文本并仅使用jQuery提交它将从textarea中放入文本（使用.val（））到我想要的元素，在这种情况下是＆＃34; span＆＃34;元素是＆＃39; editableElement＆＃39;使用.text（）就可以了。没问题，它第一次起作用。在我尝试编辑第二个跨度后，它会不断地修改前一个跨度，无论我输入到textarea（完全清除，问题不在这里）我已经用简单的方式运行了快速调试foreach on the editable element，问题在于，由于某种原因，每当我将对象发送到函数时，它都会继续向editableElement变量添加对象。我尝试编辑的跨距数，对象数将在我的变量中，索引为0。

任何想法可能是什么原因？

提前致谢！

编辑：根据要求将整个代码整理成一件我有问题，虽然它之前也是整个代码，但是我在编写它的早期阶段，我知道它很难读，但现在可能是按要求正确格式化。

$(window).load(function()
{
  var modalContent = $('#modalContent');
  modalOverlay = $('#modalOverlay');

  $('a, span').click(function(event)
  {
    var editableElement = $(this);

    if($(this).is('a'))
    {
        event.preventDefault();
    }

    if(editableElement.is('span'))
    {
        processType(editableElement, 'simpleText', modalContent)
    }
  });

  $('#codeGenButton').click(function()
  {
    var container = $('#codeContainer');

    container.empty();
    container.text(getPageHTML());
  });

  $('#modalClose').click(function()
  {
    $(this).parent().parent().animate({'opacity': '0'}, 200, 
      function(){
        $(this).css({'display': 'none'});
      });
    });
  });

function fillData(targetDomElement, modalObject)
{
  $('#modalSubmit').click(function(){
    targetDomElement.text($('#simpleTextEdit').val());
    closeModalWindow();
  });
}

function processType(targetDomElement, type, modalObject)
{
  modalObject.empty();

  if(type == 'simpleText')
  {
    modalObject.append("<p id='simpleTextEditTitle'>Text editor</p><textarea id='simpleTextEdit'></textarea>");
    getModalWindow();
    fillData(targetDomElement, modalObject);
  }
}

逐步完成它应该做的事情：

首先，不应该为此需要html，这没关系，这是诚实的整个代码。

- 当您点击（span）的元素或（a）的元素时，它会触发该函数。
- 它将检查它实际上是（span）还是（a）元素。
- 目前如果它是一个元素（a），它什么也没做，还没有实现，但如果是（span），它会调用processType函数，它会发送＆＃34;处理程序？＆＃ 34;元素即＃34; editableElement＆＃34;已经在点击事件之后立即声明，＆quot; simpleText＆＃39;它也会被发送，只是为了区分我稍后将发送到processType函数的元素类型，以及最后的＆＃34; modalConotent＆＃34;只是一个div容器，仅此而已。
- 一旦函数首先获取数据，它将确保模态窗口清除其中的所有数据，然后它会在模式窗口中附加一些html代码，如您所见在我将数据附加到其后立即弹出，它实际上只是一个显示：块＆＃39;和＆＃39;动画：不透明度：1＆＃39;没什么特别的。
- 最后它会触发＆＃39; fillData＆＃39;功能，它将把我想要的数据来自＆＃39;＃simpleTextField＆＃39;这只是一个（textarea），你可以写，我想要的元素＆＃39; editableElement＆＃39;这是你在第一个地方点击的元素，提交后的一个（span）元素，这又是一个css of display：none＆＃39;和＆＃39;不透明度：0＆＃39;关闭模态窗口。

结束。

Answer 1

你的问题在这里

function fillData(targetDomElement, modalObject)
{
  $('#modalSubmit').click(function(){
    targetDomElement.text($('#simpleTextEdit').val());
    closeModalWindow();
  });
}

每次调用此函数时，它都会在创建处理程序时添加一个带有参数的新单击处理程序。此处理程序在添加中添加到已创建的处理程序中。查看演示here。在连续点击spans通知后，只需点击一次即可多次调用fillData。

为了给您提供最佳答案，我需要知道modalSubmit按钮与modalContent的关系。页面上也是modalSubmit动态或静态的吗？

使用on和off分别绑定和删除处理程序，这是一个相当hacky修复：

function fillData(targetDomElement, modalObject)
{
  $('#modalSubmit').off("click"); /*Clear Hanlders*/
    $('#modalSubmit').on("click", function(){
      console.log("fill data");
      console.log(targetDomElement);

    targetDomElement.text($('#simpleTextEdit').val());
    /*closeModalWindow(); Don't have anything for this so ignoring it*/
  });
}

Demo

Answer 2

我自己解决了这个问题，使用.submit（）（当然这意味着添加表单，输入类型为submit）而不是.click（）当我发送请求修改元素时我自己最初点击了。

我不明白，为什么它做了我在使用.click（）触发器时所做的事情。

通过＆＃34;这个＆＃34;到jQuery问题的一个函数

2 个答案: