jQuery не будет запускаться на сайте разработки, но работает с онлайновыми редакторами. Не удается найти конфликт

Question

У меня возникла проблема с jQuery, где я могу заставить его работать в разных средах тестирования, но не на моем сайте разработки. Кажется, я не могу найти конфликт или что бы это вызвало.

Как это должно работать: когда вы наводите курсор на значки, он меняет видимый div выше. У меня он работает здесь: http://codepen.io/redbranchmedia/pen/dkiCB и здесь: http://jsfiddle.net/nXzFX/

HTML:

<div class="outercontainer"> 
<div class="slidecontainer slide1"> 
    <div class="innercontainer"> 
     <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" /> 
     <div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract &amp; engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p> 
     </div> 
     <div class="ctabutton"> 
      <p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p> 
      <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> 
      <h3 class="ctaaction">Let's Talk >></h3> 
     </div> 
    </div> 
</div> 
<div class="slidecontainer slide2 hiddenslide"> 
    <div class="innercontainer"> 
     <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" /> 
     <div class="prodpara"><h2>Source &amp; CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p> 
     </div> 
     <div class="ctabutton"> 
      <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p> 
      <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> 
      <h3 class="ctaaction">Request a Demo >></h3> 
     </div> 
    </div> 
</div> 
<div class="slidecontainer slide3 hiddenslide"> 
    <div class="innercontainer"> 
     <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" /> 
     <div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from one system.</p> 
     </div> 
     <div class="ctabutton"> 
      <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p> 
      <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> 
      <h3 class="ctaaction">Request a Demo >></h3> 
     </div> 
    </div> 
</div> 
<div class="slidecontainer slide4 hiddenslide"> 
    <div class="innercontainer"> 
     <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" /> 
     <div class="prodpara"><h2>Career Sites</h2><p>Promote jobs and strengthen your employer brand by building career sites using a simple Content Management System.</p> 
     </div> 
     <div class="ctabutton"> 
      <p class="ctatext">Deliver your employer brand every- where with Talemetry Career Sites.</p> 
      <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> 
      <h3 class="ctaaction">Request a Demo >></h3> 
     </div> 
    </div> 
</div> 
<div class="slidecontainer slide5 hiddenslide"> 
    <div class="innercontainer"> 
     <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" /> 
     <div class="prodpara"><h2>Apply</h2><p>Capture more of the best applicants by creating a simple, integrated, and social and mobile-ready application process.</p> 
     </div> 
     <div class="ctabutton"> 
      <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p> 
      <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png"> 
      <h3 class="ctaaction">Request a Demo >></h3> 
     </div> 
    </div> 
</div> 

<div class="iconcontainer"> 
    <div class="icon icon1" data-slide="slide1"> 
     <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/talemetry_icon2.png"> 
     <p>Talemetry</p> 
    </div> 
    <div class="icon icon2" data-slide="slide2"> 
     <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/source_and_crm.png"> 
     <p>Source &amp; CRM</p> 
    </div> 
    <div class="icon icon3" data-slide="slide3"> 
     <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/job_broadcast.png"> 
     <p>Job Broadcast</p> 
    </div> 
    <div class="icon icon4" data-slide="slide4"> 
     <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/career_sites.png"> 
     <p>Career Sites</p> 
    </div> 
    <div class="icon icon5" data-slide="slide5"> 
     <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/apply.png"> 
     <p>Apply</p> 
    </div> 

</div> 

CSS:

.outercontainer { 
    width:100%; 
} 

.slidecontainer { 
    width:100%; 
    height:285px; 
} 

.slidecontainer.hiddenslide { 
    display:none; 
} 

.slidecontainer.slide1 { 
background-color:#b7be10; 
} 

.slidecontainer.slide2 { 
background-color:#374bb5; 
} 

.slidecontainer.slide3 { 
background-color:#ef123e; 
} 

.slidecontainer.slide4 { 
background-color:#efae00; 
} 

.slidecontainer.slide5 { 
background-color:#9d5bb6; 
} 

.slidecontainer .innercontainer { 
    max-width:940px; 
} 

img.productimg { 
    float:right; 
} 

.prodpara > H2 { 
    font-size:30px; 
    color:#fff; 
} 

.prodpara > p { 
    font-size:18px; 
    color:#fff; 
} 

.ctabutton p.ctatext { 
    font-size:15px; 
} 

p.ctaline { 
    font-size:; 
} 

h3.ctaaction { 
    font-size:20px; 
} 

.iconcontainer { 
    max-width:940px; 
    width:100%; 
    margin:0 auto; 
} 

.iconcontainer .icon { 
    float:left; 
    width:90px; 
    text-align: center; 
} 

.iconcontainer .icon p { 
    color:#585858; 
    font-size: 14px; 
} 

JavaScript:

<script type="text/javascript"> 
$('.iconcontainer .icon').on(
{ 
    mouseenter: function() 
    { 
     $('.outercontainer .slidecontainer').addClass('hiddenslide'); 
     var show_slide = $(this).attr('data-slide'); 
     $('.' + show_slide).removeClass('hiddenslide'); 
    } 
}); 
</script> 

Я не могу заставить его работать на моем сайте развития здесь (где я хочу его): http://talemetry.redbranchmedia.com/

Я также установить его на тестовой странице, потому что я думал, что, может быть, слайдер мешая: http://talemetry.redbranchmedia.com/testing-page/

К сожалению , он нигде не работает на сайте разработки, но работает на сайтах JSFiddle и CodePen.

Я пробовал много вещей, включая: Вызов различных версий JQuery от разработчиков библиотек Google Calling в JQuery внутри на сайте Замена «$» в моем сценарии с «JQuery» (тематические авторы, кажется, сделал это) и много, много больше.

Я в недоумении за то, что вызывает конфликт и препятствует этому запуску. Я ценю любую помощь.

Answer 1

JSFiddle и CodePen обычно ожидают события, которые будут готовы для запуска вашего кода.

Если ваш код работает на этих сайтах, я предлагаю оборачивать код в $ (документ) .ready() блока, а именно:

$(document).ready(function(){ 
    $('.iconcontainer .icon').on(
    { 
    mouseenter: function() 
    { 
     $('.outercontainer .slidecontainer').addClass('hiddenslide'); 
     var show_slide = $(this).attr('data-slide'); 
     $('.' + show_slide).removeClass('hiddenslide'); 
    } 
    }); 
}); 

Answer 2

Try заключени в DOM готовый обработчик

$(function() { 
    $('.iconcontainer .icon').on({ 
     mouseenter: function() { 
      $('.outercontainer .slidecontainer').addClass('hiddenslide'); 
      var show_slide = $(this).attr('data-slide'); 
      $('.' + show_slide).removeClass('hiddenslide'); 
     } 
    }); 
}); 

Ваш сценарий объявлен перед body и элементы еще не доступны в DOM. Таким образом, событие связано с пустым jQuery Object. Вставляя код в обработчик DOM, убедитесь, что элементы доступны в DOM, прежде чем какие-либо события будут связаны. Если нет, вы можете переместить скрипт непосредственно перед закрывающим тегом тела.