首次编译

时间:2018-04-27 22:03:35

标签: javascript element

很抱歉有线标题,我无法用标题中的几个字来解释这个问题。我是一个非常新的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"

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

1 个答案:

答案 0 :(得分:0)

您说您的编辑按钮被替换,这意味着当删除旧按钮时,其附加事件将不再起作用。所以而不是:

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

你应该这样做:

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

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