0

I am trying to find a way round a third party page builder that strips code out of the text areas of their "information boxes" in order to add some links to the team pages. It seems you can add ul's but not add any class information to them. I'm trying to get around this by using jquery to add click events to the li elements, the code I have is:

jQuery(function($) {
  jQuery('.contact-det ul li:nth-child(1)').click(function() {
    location.href = '/click-one';
  });
  jQuery('.contact-det ul li:nth-child(2)').click(function() {
    location.href = '/click-two';
  });
});

and the html

<div class="wpb_wrapper ">
    <div class="contact-det" style="background-color: #4389a2;">
        <p>1. <b>drop a line</b></p>
        <h6>Contact Information</h6>
    </div>


    <div class="contact-det" style="background-color: #544c93;">
        <p>2. <b>find us</b></p>
        <h6>Address</h6>
    </div>


    <div class="contact-det" style="background-color: #5c258d;">
        <p>3. <b>office hours</b></p>
        <h6>Monday–Friday<br>
9am–5pm</h6>
    </div>


    <div class="contact-det" style="background-color: #4d6799;">
        <p>4. <b>meet us</b></p>
        <h6><p></p>
<ul>
<li>Click One</li>
<li>Click Two</li>
</ul>
<p></p></h6>
    </div>

</div>

Am I using the nth-child wrongly? Going wrong somewhere else?

rmsGreig
  • 37
  • 1
  • 9
  • What problem are you having? The index in `nth-child` is 1-based, is that what you're expecting? – Barmar Mar 12 '19 at 16:18
  • 1
    please add some html code as well, so we can understand what;s going on – Faizan Khan Mar 12 '19 at 16:18
  • `(function($) ...)` should be `jQuery(function($) ...)` – Barmar Mar 12 '19 at 16:20
  • Without that, you're just creating an anonymous function but never calling it. – Barmar Mar 12 '19 at 16:20
  • Missing `($)` before last closing parenthesis: `(function($) {...}($))` – Kévin Bibollet Mar 12 '19 at 16:23
  • 1
    I don't get what ***"fudge a text area"*** means... Are you creating elements dynamically? – Louys Patrice Bessette Mar 12 '19 at 16:31
  • Not much point passing `$` to the function then using `jQuery(` inside - but as provided it doesn't get called at all, there are 2 solutions provided above from @Barmar or @iArcadia's with fix: `(function($) {...}(jQuery))` (then you can use `$ inside without worrying about conflicts). – freedomn-m Mar 12 '19 at 16:36
  • 1
    If it's a 3rd party page builder, it's highly likely that the DOM elements are added after the page has loaded - so try with `$(document).on("click", ".contact-det ul li:nth-child(1)", function() { ...` – freedomn-m Mar 12 '19 at 16:39
  • I have updated the post, hopefully it contains the correct information now – rmsGreig Mar 12 '19 at 16:55
  • @freedomn-m this worked thank you :-) – rmsGreig Mar 12 '19 at 16:58
  • Glad you got it sorted - when you start working with events and attaching them to elements that don't exist, it can be a bit confusing. Have a read of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Mar 12 '19 at 17:03
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m Mar 12 '19 at 17:03
  • @freedomn-m I was first going to point out that he should be using `$` inside the function, but that was when I noticed that he wasn't calling the function at all, so I decided thate was more important to point out. – Barmar Mar 12 '19 at 18:38
  • @Barmar your solution is a valid fix. iArcadia passed $ into $ which is pointless. First part of my comment was to OPs code which uses $ outside and jQuery inside. Apologies if you thought my comment was directed at your fix. – freedomn-m Mar 12 '19 at 19:20
  • many thanks for the help, I hadn't seen the event binding post but have now, it's been a while since i've done even something small with jquery so very appreciated. – rmsGreig Mar 13 '19 at 09:04

1 Answers1

0

See @Barmar and @freedomn-m comments, I had missed the initial jquery and had not thought about the elements in questions in terms of them being dynamic.

rmsGreig
  • 37
  • 1
  • 9