将“ this”传递给jQuery问题中的函数

Question

抱歉，到目前为止无法找到解决方案。

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

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

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

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

当我第一次发送'editableElement'变量时，一切都很好，将对象发送到我的函数，在这里我打开了一个模态窗口，这里有一个textarea，如果我输入文本并仅使用jQuery提交，它将把文本从textarea（使用.val（））到我想要的元素，在这种情况下是“ span”元素，它是在其上使用.text（）的“ editableElement”。 没问题，这是第一次。 在我尝试编辑第二个跨度之后，它也会不断修改前一个跨度，无论我输入到textarea中是什么（已完全清除，问题不在这里），我已经在一个简单的foreach上运行了快速调试问题是由于某种原因，每次我将其发送给函数时，它都会不断将对象添加到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，这无关紧要，老实说，这就是整个代码。

1. • 当您单击（span）的元素或（a）的元素时，它将触发该功能。
2. • 它将检查它实际上是（span）还是（a）元素。
3. • 当前，如果它是元素（a），则不执行任何操作，尚未实现，但是，如果它是（span），它将调用processType函数，并发送“处理程序”？ 将元素的名称更改为“ editableElement”（已在click事件后立即声明），“ simpleText”也将发送，只是为了区分稍后我将发送至processType函数的元素类型，最后， modalConotent“只是div容器，仅此而已。
4. • 函数首先获取数据后，将确保清除模态窗口中的所有数据，然后将在模态窗口中附加一些html代码，如您所见在我向其中添加数据之后，它实际上只是一个“ display：block”和“ animate：opacity：1”，那里没有什么特别的。
5. • 最后，它将触发“ fillData”功能，该功能会将我所需的数据从“ #simpleTextField”（仅是您可以在其中写入的文本区域）放到所需的元素“ editableElement”中，该元素是您在首先，提交之后的（跨度）元素，也就是只是一个css'display：none'和'opacity：0'关闭模态窗口。

结束。

Answer 1

你的问题在这里

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

每次调用此函数时，都会在创建处理程序时添加具有性能的新单击处理程序。 除了已创建的处理程序之外 ，还添加了该处理程序。 在此处查看演示。 在spans上连续单击之后，注意到单击一次如何fillData调用fillData 。

为了给您最好的答案，我需要知道您的modalSubmit按钮相对于modalContent 。 页面上的modalSubmit是动态还是静态？

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

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*/
  });
}

演示

Answer 2

我已经通过使用.submit（）解决了它自己（当然，这意味着添加表单以及类型为submit的输入），而不是在我发送修改原来单击的元素的请求时使用.click（） 。

但是我不明白，为什么它使用了.click（）触发器后却做了什么。