Question

我已经获得了以下bootstrap3按钮代码，该代码包含在容器div中。该按钮除了plus图标外没有任何文字。

<div id="container">
    ...
    <a type="button" class="btn btn-success input-sm btn-add">
        <span class="glyphicon glyphicon-plus-sign black" aria-hidden="true"></span>
   </a>
    ...
</div>

以下是我的JS-Object，其中包含plus按钮的事件监听器。

var query_builder = {
    init: function() {
        this.cacheDom();
        this.bindEvents();
    },
    cacheDom: function() {
        this.$container = $("#container");
        ...
    },
    bindEvents: function() {
        this.$container.on('click', '.btn-add', this.addRule.bind(this));
        ...
    },
    addRule: function(evt) {
        ...
        ...
        $(evt.target).addClass('invisible');
    }
}

当我点击plus图标外的任何地方但在按钮内时，事件会被触发，最后它会变得不可见。
当我完全点击plus图标时，事件会被触发，但只有图标变为不可见，而按钮会留空。我绑定事件时，我不知道如何正确传递按钮的上下文。

注意：我是面向对象JavaScript的新手。

Answer 1

使用evt.currentTarget。我认为这是一个特殊的jQuery事件字段，它与事件委托有关。我希望我有一个更加坚实的答案，但我很高兴它对你有用:)。

编辑：这是一些文档。

<强> event.currentTarget

https://api.jquery.com/event.currentTarget/

描述：事件冒泡阶段中的当前DOM元素。

此属性通常等于函数的属性。

<强> event.target

https://api.jquery.com/event.target/

描述：发起事件的DOM元素。

target属性可以是为事件注册的元素   或其后代。将event.target与之比较通常很有用   这是为了确定事件是否由于事件而被处理   冒泡。这个属性在事件委托时非常有用   事件泡沫。

JavaScript正确绑定参数

1 个答案: