jQuery点击附加类答案

【问题标题】：jQuery click on appended classjQuery点击附加类
【发布时间】：2018-08-02 11:54:43
【问题描述】：

这个问题已经解决了很多次，但这里找到的解决方案在我的情况下仍然不起作用。

我使用我购买的 jQuery 脚本（Codecanyon Real3d 翻书），它有自己的 js 文件。该脚本在名为“.flipbook-right-arrow”的跨度上附加了一个类。它上面应用了一个“NextPage()”函数。

我想做的是在我自己的自定义 js 文件中添加我的另一个事件，在另一个事件之上（原始的缩小脚本对我来说太复杂太复杂了）。

所以我从平常开始：

$('.flipbook-right-arrow').click(function(){
    alert()
})

它不起作用，看起来很正常，因为已经附加了类。

好的，所以，我到处读到这是正确的做法：

$(document).on('click', '.flipbook-right-arrow', function() {
  alert();
});

但还是什么都没有……

我也尝试了这些，但没有成功：

$( ".flipbook-right-arrow" ).live( "click", function() {
  alert();
});

$( document ).delegate( ".flipbook-right-arrow", "click", function() {
  alert();
});

$('.flipbook-right-arrow').on('click', function(){
    alert();
});

以下是按钮在原始脚本中的附加方式：

self.btnNext = jQuery('<div class="flipbook-nav"><div class="flipbook-arrow-wrapper"><span class="flipbook-right-arrow skin-color skin-color-bg"></div></div>')
    .appendTo(self.bookLayer)
    .bind('tap click', function(e) {

        if (self.btnNext.disabled) return;
        self.btnNext.disabled = true
        setTimeout(function() {
            self.btnNext.disabled = false;
        }, 300)

        e.stopPropagation(); //here was the problem!
        e.preventDefault();
        self.Book.nextPage();
    });

有什么问题？是事件处理问题还是范围问题？我只是不知道。而且我还不够精明，无法考虑清楚。

仅供参考：

我也“e.prevenDefault()”-ed 他们，没有成功。
我的自定义 js 文件是在所有其他脚本之后加载的。

谢谢。

【问题讨论】：

请显示该类是如何附加的。
我用代码编辑了我的初始帖子。请注意，即使我在“self.Book.nextPage();”之后添加警报在原始脚本中，什么都不会发生。感谢您的帮助。
尝试关闭你的<span>（以防万一）？
好消息（在他们的脚本中，不是我的）。但仍然没有发生任何事情。
好吧，click 事件似乎被您正在使用的同一脚本捕获，该脚本使用 stopPropagation 本身，因此它永远不会上升到 document 或任何封闭元素。如果您从那里删除stopPropagation，它是否有效（使用您的第二种方法）？

标签： jquery class click append

【解决方案1】：

试试这个：

$('.flipbook-right-arrow').on('click', function(){
    alert()
});

还确保 "flipbook-right-arrow" 是一个类，因为您就是这样称呼它的。

【讨论】：

感谢您的回答。我忘了说我也试过这个（我编辑了我的帖子）。是的，它显然是一个类。这是它在浏览器上的显示方式：“”。

【解决方案2】：

试试这个，看看你的事件是否是事件触发：

$(document).on('click', '.flipbook-right-arrow', function(e) {
    e.stopPropagation()
    alert('Why hello there')
});

注意：e 我作为函数的参数传递。这就是事件。现在，我们正在尝试通过调用 stopPropagation() 来停止对该事件的所有绑定操作。

【讨论】：

感谢您的帮助。我试过了，有道理，但是没用。箭头继续做它的事情，但没有提醒任何东西。
嗯，控制台有什么错误吗？这个自定义脚本是否甚至包含在您尝试覆盖它的页面中？此外，请确保您的自定义脚本是队列中的最后一个，以便它可以覆盖主脚本。
感谢您的帮助。控制台没有提及任何内容。那里没有错误。我的脚本现在直接添加到我的页面中。我的所有其他自定义脚本都运行良好。我的自定义脚本包含在我页面的最后一个“”中，所以我假设它们是在其他任何内容之后阅读的。

【解决方案3】：

Jeto 找到了问题（谢谢）。

原始脚本停止了事件的传播，所以我只是摆脱了那个指令，一切都很好。

感谢大家的帮助！

【讨论】：