I have a problem where the below code is being fired on the wrong element, the code below is inside the _create function of a jquery widget called tag, but when i click the x button as illustrated in the gif below, it removes the "goo" tag instead of "yoo" but i clicked on "yoo"
https://gyazo.com/c255d8c136624c235a3af0de4ee40fff
if(this.options.removable)
{
this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
console.log(this.removeButton.parent().text());
this.removeButton.click(function(e){
alert(self.element.text());
self._destroy();
e.preventDefault();
});
}
and this is the resulting html code for reference
image of resulting html as displayed in the inspector
Thanks in advance.
this is the full JS code for the widget
$.widget( "search.tagify", {
options: {
followerCount: 30,
description:
`a Javascript library, consider also adding the Javascript tag. jQuery is a
popular cross-browser JavaScript library that facilitates
Document Object Model (DOM) traversal,
event handling…,`,
name: "tag name goes here",
removable: false
},
_destroy: function()
{
//Tips.remove(this.element);
this.element.remove();
},
_create: function() {
self = this;
this.element
.addClass( "tag" )
.text( this.options.name )
.protipSet({
title: this.options.description,
position: "bottom",
size: "small",
skin: "square",
classes: "tag-tooltip",
})
if(this.options.removable)
{
this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
console.log(this.removeButton.parent().text());
this.removeButton.click(function(e){
alert(self.element.text());
self._destroy();
e.preventDefault();
});
}
},
});
Please check the following code..
if(this.options.removable)
{
this.removeButton = $("<span class='close glossy'>x</span>").appendTo(this.element);
console.log(this.removeButton.parent().text());
this.removeButton.click(function(e){
alert(self.element.text());
//here is the change you can access the targeted element like this as well
$(e.target).parent('.tag').remove();
e.preventDefault();
});
}
I have made changes in the code please check, I have show the other mechanism for selecting the target
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.