正确的技术将事件添加到已经被插件绑定的元素？

问题描述 投票：0回答：3

我需要将一个事件附加到Wordpress的Hero Maps插件中的类别按钮。我目前使用的代码没有按预期工作：

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
3个回答
2
投票

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包装器中之后，如果它仍然不起作用，请在console.log(this)声明之前执行var，以确保执行代码并找出this对象在该上下文中的内容。

也许你的.hmapsprem_cat_tab_container > div选择器有问题，这是你的代码的问题。

注意：一种优越的绑定方式，特别是在WordPress中，任何插件都可以进行ajax调用并动态更改DOM，就是绑定到可以依赖的容器上。

例如，假设您的页面容器的id为main-container。不是为.hmapsprem_cat_tab_container > div集合中的每个元素添加一个绑定，而是只对您可以依赖的容器进行一次绑定：

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

您不仅可以用一个替换多个事件绑定，而且还可以在事件发生时获得选择器评估的巨大优势，而不是在绑定完成时。这意味着绑定将起作用（如果点击是在.hmapsprem_cat_tab_container > div元素内进行的）甚至是动态添加的元素，在绑定时不存在于DOM中。 显然，您可以将#main-container替换为.hmapsprem_cat_tab_container > 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' );

上面的代码片段应该在你的活动主题的functions.php里面，如果你在该文件中有任何定义，你应该确保它没有放在另一个php函数中。 path/to/应该是相对于活动主题文件夹，file.js应该包含你的jQuery脚本，包装在上面显示的包装器中。

1
投票

你有没有包含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元素并执行Inspect。然后，查看浏览器检测到的选择器是什么。

0
投票

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

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

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

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

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

在这段代码中，尝试使用console.log这些元素来查明它们是否存在于DOM中。

如果仍然无效，请尝试在$(document).ready();函数中运行此代码，以确保在执行JavaScript代码之前已加载所有内容。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.