JQuery 点击事件触发了错误的元素？

Question

我有一个问题，下面的代码在错误的元素上触发，下面的代码在一个名为标签的 jquery 小部件的 _create 函数中，但是当我单击 x 按钮时，如下所示下面的 gif，它删除了 "goo" 标签而不是 "yoo" 但我点击了 "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();
        });
}

这是生成的html代码供参考

image of resulting html as displayed in the inspector

提前致谢。

这是小部件的完整 JS 代码

$.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();
        });
    }

},

});

Answer 1

请检查以下代码..

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();
    });
}

我已经修改了代码请检查，我已经展示了选择目标的其他机制

JQuery 点击事件触发了错误的元素？

JQuery click event firing off wrong element?

javascript

jquery

jquery-ui