【问题标题】:Correct technique to add event to an element already bound by a plugin?将事件添加到已被插件绑定的元素的正确技术?
【发布时间】:2018-08-06 18:49:03
【问题描述】:

我需要在 Wordpress 的英雄地图插件中的类别按钮上附加一个事件。我目前使用的代码没有按预期工作:

Wordpress 插件生成的代码:

<div id="" class="hmapsprem_cat_tab_container ">
 <div id="hmapsprem_tab_cat_sel_0" class="hmapsprem_cat_tab active" ><a>CULTURE</a></div>
 <div id="hmapsprem_tab_cat_sel_1" class="hmapsprem_cat_tab active"><a>DINING</a></div>
 <div id="hmapsprem_tab_cat_sel_2" class="hmapsprem_cat_tab active"><a>HOTEL</a></div>
 <div id="hmapsprem_tab_cat_sel_3" class="hmapsprem_cat_tab active"><a>RETAIL</a></div>
 <div id="hmapsprem_tab_cat_sel_5" class="hmapsprem_cat_tab active"><a>z199W</a></div>
 <div style="clear:both;"></div>
</div>

我的 jQuery:

$(".hmapsprem_cat_tab_container > div").click(function(){
    var id = $(this).attr('id');
    console.log(id);
});

没有任何东西被记录到控制台。插件是否以某种方式拒绝我访问这些元素?

【问题讨论】:

    标签: jquery wordpress


    【解决方案1】:

    Wordpress 在 noConflict 模式下运行 jQuery。这样做是为了允许依赖于特定 jQuery 版本的插件加载他们自己的 jQuery 版本,并且不会与 Wordpress 使用的一个冲突。

    对你来说,这意味着你需要将你可能拥有的任何 jQuery 代码包装到一个函数中,并将 jQuery 对象传递给它:

    (function($) {
      // $ works here...
    })(jQuery)
    

    另一种方法是在所有 jQuery 代码中使用 jQuery 而不是 $

    此外,请确保在您期望的代码出现时运行您的代码。如...

    (function($) {
      // on dom loaded:
      $(document).ready(){
         // stuff
      }
    
      // on page loaded:
      $(window).on('load', function(){
        // stuff
      })
    })(jQuery)
    

    在将 jQuery 代码包装到 noConflict 包装器后,如果仍然无法正常工作,请在 var 声明之前执行 console.log(this),以确保执行代码并找出 this 对象是什么在这种情况下。

    也许你的.hmapsprem_cat_tab_container &gt; div 选择器有问题,这就是你的代码的问题。

    注意:一种更好的绑定方式,尤其是在 WordPress 中,任何插件都可以进行 ajax 调用并动态更改 DOM,是绑定到您可以信赖的容器上。

    例如,假设您的页面容器的 id 为 main-container。您无需为.hmapsprem_cat_tab_container &gt; div 集合中的每个元素添加一个绑定,而是在您可以信赖的容器上只创建一个绑定:

    $('#main-container').on('click', '.hmapsprem_cat_tab_container > div', function(e) {
      console.log(e, this);
    })
    

    您不仅可以将多个事件绑定替换为一个,而且还可以获得选择器在事件发生时进行评估的巨大优势,而不是在绑定完成时进行评估。这意味着即使在动态添加的元素上(如果在 .hmapsprem_cat_tab_container &gt; div 元素内进行点击)绑定也将起作用,在绑定时不存在于 DOM 中。
    显然,您可以将 #main-container 替换为 .hmapsprem_cat_tab_container &gt; div 元素的任何其他有效父元素,包括 document
    经验法则是找到(并绑定)包含您希望定位的所有子代的最具体的父代。如果事件被放置在您绑定的容器之外的子项上触发,该函数将不会运行!


    最后但同样重要的是:您应该使用 wp_enqueue_script 将 JavaScript 添加到 WordPress,对于这种情况,您应该将 jQuery 指定为脚本的 dep:

    function enqueue_my_jquery_script() {
      wp_enqueue_script(
        'some_specific_script_name',
        get_template_directory_uri('path/to/file.js',__FILE__),
        ['jquery']
      );
    }
    
    add_action( 'wp_enqueue_scripts', 'enqueue_my_jquery_script' );  
    

    上面的 sn-p 应该放在你的活动主题的functions.php 中,如果你在那个文件中定义了任何东西,你应该确保它没有放在另一个 php 函数中。 path/to/ 应该是相对于活动主题文件夹,file.js 应该包含您的 jQuery 脚本,包装在上面显示的包装器中。

    【讨论】:

    • 谢谢,您的#main-container 技术为我解决了这个问题!
    【解决方案2】:

    您是否包含 jquery.min.js 库? https://www.w3schools.com/jquery/jquery_get_started.asp

    $(".hmapsprem_cat_tab_container > div").click(function(){
        var id = $(this).attr('id');
        console.log(id);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="" class="hmapsprem_cat_tab_container ">
     <div id="hmapsprem_tab_cat_sel_0" class="hmapsprem_cat_tab active" ><a>CULTURE</a></div>
     <div id="hmapsprem_tab_cat_sel_1" class="hmapsprem_cat_tab active"><a>DINING</a></div>
     <div id="hmapsprem_tab_cat_sel_2" class="hmapsprem_cat_tab active"><a>HOTEL</a></div>
     <div id="hmapsprem_tab_cat_sel_3" class="hmapsprem_cat_tab active"><a>RETAIL</a></div>
     <div id="hmapsprem_tab_cat_sel_5" class="hmapsprem_cat_tab active"><a>z199W</a></div>
     <div style="clear:both;"></div>
    </div>

    检查 JQuery 是否可用:Checking if jquery is loaded using Javascript

    另外,检查选择器是否正确。

    在这种情况下,它是;但是,如果 html 元素位于代码的其他部分或通过 iFrame 加载,则需要更改您的选择器。

    执行此操作的一种方法是右键单击 html 元素并执行检查。 然后,看看浏览器检测到的选择器是什么。

    【讨论】:

    • 该站点在使用 jQuery 1.12.4 和 jQuery migrate 1.4.1 的 Wordpress 上运行
    • 首先检查jQuery是否加载:stackoverflow.com/questions/7341865/….
    • 然后,检查选择器是否正确。通过右键单击元素并检查浏览器在执行检查时检测到的选择器是什么来做到这一点。
    【解决方案3】:

    通过转到 DevTools 检查 jQuery 是否正确加载到您的项目中,而不是转到 Sources 选项卡并在左侧尝试查找您已附加到项目的 jQuery 文件。

    如果文件是通过 CDN 附加的,只需按 CTRL + U/ CMD + U 并检查它是否正确包含。

    我可以看到您正在尝试将此点击事件附加到多个元素。

    尝试使用事件冒泡机制,因此在文档上触发点击事件 - 它更有效。

    $(document).on('click', '.hmapsprem_cat_tab', function(event) {
        const singleTab = $('.hmapsprem_cat_tab');
        console.log(singleTab);
    });
    

    在这段代码中,尝试 console.log 这些元素,看看它们是否存在于 DOM 中。

    如果这仍然不起作用,请尝试在 $(document).ready(); 函数中运行此代码,以确保在执行 JavaScript 代码之前加载所有内容。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-04-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-09-07
      • 2014-09-17
      • 1970-01-01
      相关资源
      最近更新 更多