0

I created a slideshow which works perfectly on desktop but on('click') doesn't work in the mobile version. However, the click works fine for other mobile buttons.

html

<section id="interests" class="container content-section text-center">
    <div class="row">
        <div class="col-md-12">
            <h2><span class="en">Interests</span><span class="es">Intereses</span></h2>
            <style id="sliderLanguage"> </style>
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <div id="sliderBubble">
                        <img class = "bubbles currentBubble" src="img/sBubblePink.png">
                        <img class = "bubbles" src="img/sBubble.png">
                        <img class = "bubbles" src="img/sBubble.png">
                        <img class = "bubbles" src="img/sBubble.png">
                        <img class = "bubbles" src="img/sBubble.png">
                        <img class = "bubbles" src="img/sBubble.png">
                    </div>                       
                </div>
            </div>
        </div>
    </div>
</section>

script.js

for (var i = 0; i < numClips; i++) {
    $($bubbles[i]).on('click', function () {
          alert('test') 
    });
 }

UPDATE It's the bootstrap css. If I don't include the boostrap the click works fine on mobile, but I don't know what part of the css is causing it to fail.

UPDATE 2 its specifically the grid system within Boostrap. I was playing around with customizing the boostrap download and I can use every single component except for the grid system which breaks the slideshow.

andrewgi
  • 620
  • 1
  • 7
  • 22
  • 2
    You need to review some jQuery tutorials, both of those code snippets are doing unnecessary work (wrapping a jQuery object in another jQuery object, not using the set features of jQuery, ...) – T.J. Crowder Jul 11 '17 at 17:06
  • You haven't provided us enough information to help you, although at a guess this question's answers should help: [*Event binding on dynamically created elements?*](https://stackoverflow.com/q/203198/157247) If not, though, please update your question with a **runnable** [mcve] using Stack Snippets (the `[<>]` toolbar button) demonstrating the problem. – T.J. Crowder Jul 11 '17 at 17:08
  • I tried to put a minimal example so it wasn't necessary to look through my entire slideshow but now I have posted the entire slideshow code. I looked at the even binding but am not sure how to apply that to this. – andrewgi Jul 11 '17 at 17:19
  • Please read the link I posted: [mcve] It''s not "Oh, that was too little? Then just post the whoole thing." It's about creating a **minimal** example that actually does replicate the problem. People are **very** happy to help, but you have to do your part. – T.J. Crowder Jul 11 '17 at 17:20
  • well the first time i posted the code that I thought illustrated the problem and you said it wasn't enough. As far as I know the only problem is the 'click' and the dynamic generation so thats what I posted. Especially since it works fine on a desktop – andrewgi Jul 11 '17 at 17:23
  • The acronym has an M and a C for a reason. Please, again, read the linked article. Your job is to create the **minimum** that **actually replicates the problem**. The best way, with HTML/JavaScript/CSS questions like this one, is to do a Stack Snippet. All of this is covered in the comments and links above. – T.J. Crowder Jul 11 '17 at 17:25
  • I edited the answer, but the culprit is Bootstrap. I tried created a JSfiddle and codepen but couldn't replicate the problem – andrewgi Jul 11 '17 at 21:29
  • Try this `$('#sliderBubble').on('click', '.bubles'), function() { ` – ad_on_is Jul 11 '17 at 21:31
  • that doesn't work because I need to the index of the one clicked on `clipIndex = [].indexOf.call(this.parentNode.children, this);` – andrewgi Jul 11 '17 at 21:35
  • There's a solution for that too: `$(this).index('.bubbles')` – ad_on_is Jul 11 '17 at 22:23

0 Answers0