英文:
Link list sidebar widget remove button not working in jquery
问题
我正在创建一个链接列表小部件。每当我们点击标题按钮时，它会添加一个带有添加链接选项的列表。一切都运行正常，但是每当我尝试点击删除标题按钮时，按钮不再起作用。警告是有效的，控制台中也显示日志，但是操作不起作用。你能帮忙检查一下吗？
Code Pen Codepen参考链接
英文:
I am creating a link list widget. Whenever we clicked on Title button, it adds a list with add link option. Everything is working fine but whenever I am trying to click the remove title button. The button is not working anymore. Where the alert is working and logs are showing also in console but the action is not working. Can you please check?
Code Pen Codepen Reference Link
答案1
得分: 0
在第23行，您只选择父HTML元素，当点击“remove-title”按钮时，但不执行任何操作。
首先，您应该确保您不要删除唯一剩下的部分。如果是这样，会先触发.add-title按钮。
如您所见，我还向btn-options div添加了一个“toast”元素，以简要显示已删除部分的标题。您可以在这里找到其余的更改：Codepen
英文:
At line 23 you are only selecting a parent HTML element when the remove-title button is clicked, but doing nothing with it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
if ($(".remove-title").length) {
$("body").on("click", ".remove-title", function() {
console.log("clicked");
$(this).parents(".btn-options");
});
}
<!-- end snippet -->
First you should make sure you're not deleting the only section left. If so, the .add-title button is triggered first.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
if ($(".remove-title").length) {
$("body").on("click", ".remove-title", function() {
console.log("clicked");
var $this = $(this);
var parent = $this.parents(".title-area");
if (!parent.siblings(".title-area").length) {
$this.siblings(".add-title").trigger("click");
}
var title = parent.find("input.title-text").eq(0).val();
var toast = parent.siblings(".title-area").find(".btn-toast");
toast.show().html("Title removed: <span>" + title + "</span>")
.delay(400).fadeOut("slow");
parent.remove();
});
}
<!-- end snippet -->
As you can see, I've also added a "toast" element to the btn-options div to briefly display the title of the deleted section. You can find the rest of those changes here: Codepen
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论