Question

我需要将事件附加到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);
});

什么都没有记录到控制台。插件是否以某种方式拒绝我访问这些元素？

Answer 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包装器中后，如果仍然无法运行，请在声明console.log(this)之前执行var，以确保代码已执行并找出{ {1}}对象在该上下文中。

也许您的this选择器有问题，这就是代码的问题。

注意：一种更好的绑定方式（尤其是在WordPress中，任何插件都可以进行ajax调用并动态更改DOM）特别是在WordPress上进行绑定。

例如，假设您的页面容器的ID为.hmapsprem_cat_tab_container > div。无需为main-container集合中的每个元素添加一个绑定，只需在可以依靠的容器上进行一个绑定即可：

.hmapsprem_cat_tab_container > div

不仅您可以用一个替换多个事件绑定，而且还获得了事件发生时（而不是在绑定完成时）选择器进行评估的巨大优势。这意味着即使在动态添加的元素上，绑定也将起作用（如果单击是在$('#main-container').on('click', '.hmapsprem_cat_tab_container > div', function(e) { console.log(e, this); })元素内进行的），而绑定时在DOM中不存在。
显然，您可以将.hmapsprem_cat_tab_container > div元素的任何其他有效父级（包括#main-container替换为.hmapsprem_cat_tab_container > div。
经验法则是找到（并绑定）最具体的父级，其中包含您希望定位的所有子级。如果事件是在绑定到您的容器之外的子容器上触发的，则该函数将无法运行！

最后但并非最不重要的一点：您应该使用wp_enqueue_script将JavaScript添加到WordPress，在这种情况下，您应该将jQuery指定为脚本的dep：

document

以上代码段应放在活动主题的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' );内，并且如果该文件中定义了任何内容，则应确保未将其放置在另一个php函数内。 functions.php应该相对于活动主题文件夹，path/to/应该包含您的jQuery脚本，并包裹在上面显示的包装器中。

Answer 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元素并进行检查。然后，查看浏览器检测到的选择器是什么。

Answer 3

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

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

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

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

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

在此代码中，请尝试console.log这些元素以了解它们是否存在于DOM中。

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

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

3 个答案: