带有 .on() 的 Wordpress 和 jQuery 事件处理程序答案

【问题标题】：Wordpress & jQuery event handler with .on()带有 .on() 的 Wordpress 和 jQuery 事件处理程序
【发布时间】：2013-01-01 23:13:54
【问题描述】：

我在使用 jQuerys .on()/.bind()` 函数时遇到了一些问题。我要做的是将点击事件附加到某个元素，因此无论何时在内容中使用它，都可以单击它并打开一个弹出窗口，而无需单独声明函数。

这是我的代码：它适用于简单的测试，但不适用于本地 Wordpress 环境。没有附加点击事件，调试没有告诉我任何事情......：

$(document).ready(function() {
$('#eins_audiotrigger').bind('click', function() {
    if($('#eins_audiotarget').attr('class') != 'fadeInUp'){
        $('#eins_audiotarget').removeClass().addClass('fadeInUp');
    }
    else {
        $('#eins_audiotarget').removeClass().addClass('fadeOutDown');   
    }
});
    
});

好的，这里还有一些细节：

我用它来包含 jQuery：include jQuery into wordpress

我尝试了所有关于 jQuery 的无冲突模式的方法。我还有另一个 (document).ready 函数被调用并且工作正常（多个 (document).ready 在一个文件中是否存在问题？

有了这一切，我想调用一个简单的 css 动画，它在我想要添加到元素的类中定义。基本上一个会飞进来，并且嵌入了一个媒体播放器。

这在直接从帖子中调用时有效，但如果应该提前将此事件添加到相应的按钮，则应该实现这一点，因为当使用普通编辑器时，Wordpress 会去除脚本标签。

【问题讨论】：

当您说“调试没有告诉我任何事情”时，您的意思是控制台中没有错误？
是的，控制台没有错误
你能console.log($) 并发布结果吗？
"..so 无论何时使用..." -> 如果您多次使用该元素，请使用类而不是 ID。确保 jquery 在本地正确包含。你必须小心，因为你删除了代码中的类，你可能想指定更好。也许你应该告诉我们你的点击函数应该做什么？
@gulty，多次使用 same 元素并不是上课的理由。它仍然是一个独特的元素

标签： jquery wordpress jquery-events

【解决方案1】：

有时它是 $ 的问题，所以试试这个。

jQuery(document).ready(function($) {
    $('#eins_audiotrigger').bind('click', function() {
        if($('#eins_audiotarget').hasClass('fadeInUp') === false){
            $('#eins_audiotarget').removeClass().addClass('fadeInUp');
        }
        else {
            $('#eins_audiotarget').removeClass().addClass('fadeOutDown');   
        }
    });
});

【讨论】：

没有帮助。 jQuery 在页面内调用时正在工作并且包含正确（这样想）。 1 concole.log($) 回复如下： function ( selector, context ) { // jQuery 对象其实就是 init 构造函数 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }
查看此链接digwp.com/2009/06/including-jquery-in-wordpress-the-right-way

【解决方案2】：

我终于想到了！作为一个 Javascript-newbee 我意识到，我可以通过这样做简单地添加一个点击按钮：

    $('#trigger').click( function() {
        $('#trigger').removeClass().addClass('fadeOutDown');
        $('#eins_audiotarget').removeClass().addClass('fadeInUp');
});
$('#closeIt').click( function () {
        $('#eins_audiotarget').removeClass().addClass('fadeOutDown');
        $('#trigger').removeClass().addClass('fadeInUp');
        setTimeout( function() {$('#trigger').removeClass()}, 1000);
});

在这里可以学到很多东西！感谢支持！

【讨论】：