jQuery not targeting id

Question

I have a page in which there is some text that needs to be in two languages. Here is my code:

$('#english').hide();

$('#enButton').on('click', function() {

  $('#english').fadeIn();
  $('#french').fadeOut();

});

#french {
  margin-top: 40px;
}

#english {
  display: block;
  position: absolute;
  top: 90px;
  left: 150px;
}

#frButton {
  top: 30px;
  left: 145px;
  position: absolute;
  cursor: pointer;
}

#enButton {
  top: 30px;
  position: absolute;
  right: 135px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="content">
  <div id="container">
    <div id="about" class="sections">
      <div id="frButton">
        <p>FRA</p>
      </div>
      <div id="enButton">
        <p>ENG</p>
      </div>
      <div id="textContainer">
        <div id="french">
          <p>Text in French.... </p>
        </div>
        <div id="english">
          <p>Text in English...</p>
        </div>
      </div>
      <!-- end of textContainer -->
    </div>
  </div>
  <!-- end of content -->
</section>
<!-- end of container -->

The last two rules are for buttons. When you click on the "English" button I want to trigger some jQuery to hide the French text and make the English appear and then do the opposite when you click back on "frButton". But this is not working and I have both texts on top of each other as the method

$( '#english' ).hide();

is not even working. I have been at this for an hour now and the #english id is not being targeted at all. Any ideas why?

The content of "about" is loaded using ajax by the way.

Try to replace `fadeIn` and `fadeOut` with ` $( '#english' ).toggle(); $( '#french' ).toggle();` — mxr7350, May 04 '17 at 15:39
Do those ids exist in the DOM at the time you try to select them? Do you attach these events after the content has been loaded? — AtheistP3ace, May 04 '17 at 15:40
But what if jQuery isn't working *here*? Because your code snippet does not show it. — Nate, May 04 '17 at 15:43
@Paul You sure about that? There's nothing in your **provided** code that would prevent this from working other than a missing jQuery reference. — Kramb, May 04 '17 at 15:44
Change the fade... for fadeToggle: http://api.jquery.com/fadetoggle/ also could be a good idea to change the language button... use only one. ' $('#english').hide(); $('#langButton').Text("ENG"); $('#langButton').on('click', function() { $('#langButton').Text((($('#langButton').Text() == "ENG")?("FRA"):("ENG"))); $('#english').fadeToggle(); $('#french').fadeToggle(); });' — DIEGO CARRASCAL, May 04 '17 at 15:54

score -1 · Answer 1 · answered May 04 '17 at 15:44

-1

$( '#english' ).hide();

is not working because #english is not present when the page loads. Your event should be written like this :

$('#about').on('click', '#enButton', function(){});

You can't attach an event to an element that is loaded in ajax, you attach it to the parent that is there at start then target the button.

answered May 04 '17 at 15:44

Pierre Gimond

1

HI, I have made sure the id exists with this: if (document.getElementById('english')) { alert('this id exists'); } else { alert('this id doesnt exist'); } and I have added this piece of code to all my links. When you hit about, alert pops up with "this id exists" but the .hide() method still doesn't target it. – Paul May 04 '17 at 16:31

jQuery not targeting id

1 Answers1