时间戳

首页 > 解决方案 > 第一次编译后重现元素

javascript - 第一次编译后重现元素

问题描述

很抱歉有线标题，我无法用标题中的几句话解释这个问题。我是 javascript 的新手，我有问题。

我有一个用户标题，当用户添加数据时，应该用少量文本输入（名字，姓氏...）替换，标题会自动更改。然后，标题下方会出现一个编辑按钮。在我的代码中，当用户单击编辑按钮时，文本输入再次出现以更改数据。问题是，编辑按钮只能在第一次使用。然后我们再次保存数据，编辑按钮不再起作用。

据我所知，输入新数据后，服务器会用 html 更改标题。包含输入数据的新标题也有编辑按钮，新标题附带的新编辑按钮不适用于代码。

这是编辑按钮的代码：

events(){

$(".js-edit-name").on("click", this.openEditor.bind(this));

}

openEditor(){
this.body.find(".form-input, .form-submit").show("slow");
this.body.find(".form-block").removeClass("hidden");
this.body.find(".js-edit-name").addClass("hidden");
this.body.find(".js-cancel-name").removeClass("hidden");
}

这是编辑按钮的代码：

<div class="icon positive positive-inverse small js-edit-name">
<svg class="svg-inline--fa fa-pencil-alt fa-w-16" aria-hidden="true"  data-prefix="fas" data-icon="pencil-alt" role="img"   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg>…. </svg>
<!-- <i class="fas fa-pencil-alt"></i> -->
" edit"

我希望我能清楚地解释这个问题。任何人都可以帮助我。非常感谢

标签： javascriptelement

解决方案

你说你的编辑按钮被替换了，这意味着当旧按钮被删除时，它的附加事件将不再起作用。所以而不是：

$(".js-edit-name").on("click", this.openEditor.bind(this));

你应该做这个：

$(document.body).on('click', '.js-edit-name', this.openEditor.bind(this));

这将允许您的处理程序运行所有.js-edit-name元素，无论它们何时附加到 dom。

推荐阅读