JQuery不在Job Adder JS小部件上工作

我在wordpress网站上工作

基本上，我需要的是，如果我点击“更多””或作业标题，它们就会转到实际链接（例如

）

默认情况下，当我单击“阅读更多”（或标题）时，作业详细信息将仅展开，链接不会更改。防止用户引用作业的实际链接

我尝试用jquery代码更改

href

属性，但奇怪的是它不起作用。这根本不起作用：

jQuery(document).ready(function($){
    $('.job a.view-details').each(function(){
        $(this).attr('href',"<?php echo get_permalink(); ?>?ja-    job="+$(this).attr('data-job-id'));
    });
    console.log("<?php echo get_permalink(); ?>");
    console.log($('.job a.view-details').attr('data-job-id'));

    $('.job a.view-details').addClass('testClass');
    $('.job .view-details').hide();

});

---

jQuery/PHP的混合看起来像失败

---

这个

get\u permalink（）

应该是

.job a.view-details

的一个数据属性，因为它不会“动态”工作。一旦HTML呈现出来，我们就不能动态访问PHP函数，只能通过AJAX来访问。

我的同事解决了这个问题

为了让这里的其他初学者受益，我想分享以下代码：

<script type="text/javascript">

   jQuery(function ($) {

            $( document ).on( "mouseenter", "#ja-jobs-widget", function(e) {

                $('.job a.view-details').each(function(){
                    $(this).attr('href',"<?php echo get_permalink(); ?>?ja-job="+$(this).attr('data-job-id'));
                    $(this).removeClass('view-details');
                });

             });
   });

</script>

jQuery（函数（$）{
$（文档）.on（“mouseenter”、“jajobs小部件”，函数（e）{
$（'.job a.view-details'）。每个（函数（）{
$（this.attr（'href'，“？ja job=“+$（this.attr（'data-job-id'））；
$（this.removeClass（'view-details'）；
});
});
});

“我们使用‘on’函数，因为当内容被动态添加到DOM中时，页面加载中没有的内容，而是由JobAdder Javascript动态添加的

它只是在每个链接中循环并更改href属性

---

然后它删除“查看详细信息”类，这样JobAdder就不会覆盖我们的链接，这样下次鼠标进入div时，它就不会一直循环通过“-

使用事件委派。看起来您的数据是通过ajax加载的，因此在代码运行时这些元素不存在runs@charlietfl当前位置我对活动委派不太熟悉。有什么建议、链接、文章等最适合在这种情况下应用吗？在这个网站上有成千上万的帖子。也可以在谷歌搜索中找到大量信息。首先阅读jQuery文档中关于（）的

on

，然后查找事件定义usage@charlietfl当前位置我已经尝试了一些事件委派。但根本不起作用。有什么建议吗？我已经编辑了帖子。显示你尝试过的代码

<div id="ja-jobs-widget"></div>
<script>// <![CDATA[
    var _jaJobsSettings = {                         
       key: "3hmt352pjc3exomgzmpysvycpm",                         
       applicationFormSettings: { 
            useExternalApplicationForm: true,                    
            showExternalApplicationFormInNewWindow: false                         
       },                                       
       jobSearchSettings: {             
            showSearchForm: true,           
            searchButtonText: "Search"              
       }             
    };
// ]]></script>
 <script src="//jobadder.com/widgets/v1/jobs.min.js"></script>

<script type="text/javascript">

   jQuery(function ($) {

            $( document ).on( "mouseenter", "#ja-jobs-widget", function(e) {

                $('.job a.view-details').each(function(){
                    $(this).attr('href',"<?php echo get_permalink(); ?>?ja-job="+$(this).attr('data-job-id'));
                    $(this).removeClass('view-details');
                });

             });
   });

</script>