javascript - 将 "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”变量时，一切都很好，将对象发送到我的函数，我在其中打开一个模式窗口，其中有一个文本区域，如果我输入文本并仅使用 jQuery 提交它，它将将文本从文本区域(使用 .val())放入我想要的元素，在本例中是一个“span”元素，它是使用 .text() 的“editableElement”。没问题，第一次可以用。在我尝试编辑第二个跨度后，它也会不断修改前一个跨度，无论我在文本区域中输入什么(已完全清除，问题不在这里)，我都使用简单的 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”已在单击事件后立即声明，“simpleText”也被发送，只是为了区分元素类型，我稍后将发送到 processType 函数，最后，“modalConotent”只是一个 div 容器，仅此而已。
4. • 一旦函数首先获取数据，它将确保模式窗口中的所有数据都被清除，然后它将在模式窗口中附加一些 html 代码，如您所见，在我向其中添加数据后立即弹出，它实际上只是一个“display: block”和“animate: opacity: 1”，没有什么特别的。
5. • 最后，它将触发“fillData”函数，该函数会将我所需的数据从“#simpleTextField”(只是一个可以写入的(文本区域))放入我所需的元素“editableElement”中，即您拥有的元素在第一个位置单击，提交后有一个(span)元素，这又是一个“display: none”和“opacity: 0”的 css，关闭模式窗口。

结束。

Answer 1

你的问题就在这里

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

每次调用此函数时，它都会添加一个新的单击处理程序，其中包含创建处理程序时的参数。该处理程序被添加到已创建的处理程序中。查看演示 here 。连续单击 spans 后，请注意单次单击如何多次调用 fillData。

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

同时使用 on 进行一个相当 hacky 的修复。和 off分别绑定(bind)和删除处理程序:

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