JQuery/JS function not firing on <a>

Question

I have five slide shows on one page and I want to be able to cycle through all of them. The slideshow is made of an UL with each a different ID, so I want to create two functions for the arrows to cycle through the slides. And I want to pass the slide ID. My code:

$(document).ready(function() {
  var slides = document.querySelectorAll('#slides li');
  var slidesTotal = $('#slides li').length;
  var currentSlide = 1;

  function nextSlide() {
    //$('a.nextSlideArrow').click(function() {
        $('#slides .slide' + currentSlide).hide();
        currentSlide++;
        if(currentSlide > slidesTotal) {
          currentSlide = 1;
        }
        $('#slides .slide' + currentSlide).show();
        //return false;
    //});
  }

  function previousSlide() {
    //$('a.previousSlideArrow').click(function() {
      $('#slides .slide' + currentSlide).hide();
      currentSlide--;
      if(currentSlide == 0) {
        currentSlide = slidesTotal;
      }
      $('#slides .slide' + currentSlide).show();
      //return false;
    //});
  }
});

<div id="slider-container">

      <ul id="slides">
        <?php
          for ($i = 1; $i <= $amountImagesSlideshow[3]; $i++) {
            echo '<li class="slide'.$i.'"><img src="'.$directories[3],$i.'.jpg" /></li>';
          }
        ?>
      </ul>

      <div class="galleryPreviewArrows">
         <a href="javascript: previousSlide()" class="previousSlideArrow">&#10094;</a>
         <a href="javascript: nextSlide()" class="nextSlideArrow">&#10095;</a>
      </div>

    </div>

Now the funny thing is, if I remove the comments where the click is on the jQuery object and comment out the function, it will work. But not this way? I don't understand.

nextSlide and previousSlide is not in the global scope. It is not accessible by HTML elements. Also, since you are using jQuery, handling events is pretty easy. Just follow this guide : learn.jquery.com/events/handling-events — Karl-André Gagnon
– Karl-André Gagnon, Commented May 1, 2017 at 15:56
$( "p" ).on( "click", function() { console.log( "<p> was clicked" ); }); So how would I go about making my own function, in which I can pass parameters? Or would I have to make a separate function like this, for every UL slide? That would be 5 almost identical functions. Seems overkill! — Athylus
– Athylus, Commented May 1, 2017 at 17:18
Make use of data attribute on your html. You can then fetch it with $(this).data('your-name') and you attribute would look like this : data-your-name="your value" — Karl-André Gagnon
– Karl-André Gagnon, Commented May 1, 2017 at 20:04

Nitesh · Accepted Answer · 2017-05-01 16:01:37Z

1

There is a difference between onclick event and functionality of href attribute.

When you write like this:

<a href="javascript: previousSlide()" class="previousSlideArrow">&#10094;</a>

It means, you are hyper referencing(trying to redirect) to some location whenever this anchor tag is clicked. It doesn't mean you are doing only click action. It means, you are doing click + redirection. href = click + redirection.

whereas, your need is only click event handling. Therefore, how you are handling through jquery.

$('a').on("click",function(){
----
----
})

This will work fine.

answered May 1, 2017 at 16:01

Nitesh

1,5151 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keith.Abramo · Accepted Answer · 2017-05-01 15:55:41Z

0

You shouldn't be using href to try to access a javascript function. That attribute is for navigation purposes. Also, binding to a jquery click even is the better way to handle your events so you adhere to separation of concerns design patterns.

If you need to put your function call in an attribute decorator, use the onclick attribute instead and don't evaluate the function by adding the parenthesis, just reference it.

<a onclick="previousSlide" class="previousSlideArrow">&#10094;</a>

answered May 1, 2017 at 15:55

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

Comments

haMzox · Accepted Answer · 2017-05-01 16:02:24Z

0

Anchor tag is for navigation which requires Href attribute. You should not use href for event handling. Instead:

<div class="galleryPreviewArrows">
         <a href="" onclick="previousSlide()" class="previousSlideArrow">&#10094;</a>
         <a href="" onclick="nextSlide()" class="nextSlideArrow">&#10095;</a>
      </div>

answered May 1, 2017 at 16:02

haMzox

2,1091 gold badge15 silver badges25 bronze badges

Comments

Rohith K P · Accepted Answer · 2017-05-01 16:16:33Z

It is strange..But writing that function outside document.ready works. It looks like that function should be defined before document is ready. That may be the reson alert works always..which is a built-in function.

Also this is not the recommended way to bind event listner. Use jquery on/off to add/remove listners.

  function nextSlide() {
    //$('a.nextSlideArrow').click(function() {
    alert('next');
    //return false;
    //});
  }

  function previousSlide() {
    //$('a.previousSlideArrow').click(function() {
    alert('prev');
    //return false;
    //});
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
  <div class="galleryPreviewArrows">
    <a href="javascript: previousSlide()" class="previousSlideArrow">&#10094;</a>
    <a href="javascript: nextSlide()" class="nextSlideArrow">&#10095;</a>
  </div>

</div>

Collectives™ on Stack Overflow

JQuery/JS function not firing on <a>

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related