jQuery第一次点击不触发但第二次点击时触发。

Question

$(document).ready(function() {
    $('#talents li').on('click',  'div', function(event) {
        event.stopPropagation();

        $(event.target).addClass('--active');
        talents_points = $('.--active').length;
        _this.setState({ points: talents_points });
        this.handlePointsMaxed(talents_points);
    });
    $('.no-right-click').bind('contextmenu', function(event) {
        event.stopPropagation();

        $(event.target).removeClass('--active');
        talents_points = $('.--active').length;
        _this.setState({ points: talents_points });
        // this.handlePointsMaxed(talents_points);

        return false;
    });
});

<ul id="talents">
    <li onClick={this.handlePointsClicks}>
        <div id="talent-stacks" className="talent-image__stacks"></div>
    </li>
</ul>`

有什么想法吗？我确定问题出在mousedown和click函数上，但是我需要它们的组合才能完成我的工作，并且没有找到其他的解决方法。

编辑：添加HTML示例以提供上下文

- Strychnine

---

当您注释掉 stopPropagation 后，它是否仍然发生？ - treyBake

你的HTML在哪里？ - hasan

@Strychnine 嗯，好的，巧合的是我也遇到了一个类似的问题，使用 .on('mouseeneter') 时它会在第二次悬停时触发.. 我还没有找到解决方法 - 但如果我找到了，我会告诉你看看是否有帮助 :) - treyBake

元素上还有更多的事件吗？请使用https://developers.google.com/web/tools/chrome-devtools/console/events#view_event_listeners_registered_on_dom_elements（如果您使用Chrome）检查所有事件。 - A. Blub

是的，也许可以在代码中或通过属性绑定点击事件，但不要两者都使用。从那个li中删除onClick={...}。你已经在jQuery中处理了点击事件。这就是为什么显示所有相关代码包括标记非常重要的原因。 - mjw

Answer 1

我已经解决了这个问题，在React组件的componentDidMount生命周期中没有正确设置函数。

感谢大家的建议。

- Strychnine

---

就此而言，混合使用jQuery事件处理和React只会在未来带来困惑和痛苦。 - Adam Jenkins