Title: Attaching Javascript events to slideshow elements
Last modified: March 22, 2021

---

# Attaching Javascript events to slideshow elements

 *  Resolved [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/)
 * Hi,
    I have two forms on a page (teal background). Both have javascript events
   attached so for example when the user types in the input field:
 * – non numeric characters are removed
    – the placeholder drifts above where the
   user is writing.
 * This works on the second form, but the javascript events are not attached to 
   the elements in the slider. I suspect this has something to do with dom loading
   order, but cannot work out exactly how to fix.
    Does anyone have a suggesiton?
   Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fattaching-javascript-events-to-slideshow-elements%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/page/2/?output_format=md)

 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14220406)
 * Hi,
 * I see that there is Javascript error on the page:
 * `Uncaught TypeError: Cannot read property 'elements' of null`.
 * I’ve checked the jeyjoo.js code and found the following:
 * – The previous error can be fixed if you added your code after the document is
   ready. So, you can add the validation code in the following block:
 * jQuery(document).ready(function(){
 * });
 * – The form in the slider doesn’t have an ID. Do you expect it to have the ID “
   contact1” . This is just my guess from what I found in the code.
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14222320)
 * Hi @mohammedeis, thankyou for the reply. This was a minor issue with variable
   declaration that is fixed. We also have added the form an ID.
 * The problem remains that the form within the slideshow is not getting any Javascript
   events attached.
 * Is it something to do with the parsing of the HTML. I notice in the page source
   code, rather than show:
    <form id=”contact1″ we get: <form id="contact1"
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14225840)
 * I see that the forms got valid ID attribute <form id=”contact1″. I was also able
   to concatenate the fields to the allFormElements array using the console.
 * I think that the issue that the allFormElements doesn’t have the form contact1
   elements.
 * Please try to wrap your code in
    jQuery(document).ready(function(){
 * });
 * I think that the problem is that you are trying to add the fields before the 
   slider gets initialized.
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14228319)
 * I agree that the issue is loading order – we already tried jQuery(document).ready(
   function(){ and also window.onload but it doesn’t work.
 * How can I get a handle on the slider javascript code in the functions.php. This
   way I can enqueue the slider javascript.
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14236700)
 * Hi,
 * Please try to execute the slide form JS work after metaslider/initialized event
   is being fired.
 * Example:
 * jQuery(document).on(‘metaslider/initialized’, function(e, identifier) {
 * //Code that collects the form fields
 * // Validate the form fields
 * });
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14237382)
 * Thank you [@mohammedeisa](https://wordpress.org/support/users/mohammedeisa/) –
   I can confirm that works!
    Nice job 🙂
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14248804)
 * Hi,
 * I’m glad to hear that your issue has been fixed.
 * Please let me know if you have any questions.
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14278945)
 * Hi [@mohammedeisa](https://wordpress.org/support/users/mohammedeisa/), actually
   I just noticed that this is still an issue. Following your solution above, the
   click events get assigned, but one the slideshow has done a full cycle of slides,
   the Javascript click events are no longer assigned the the input fields and buttons.
   
   Do you have any idea why this is and what we can do about it? Thanks
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14279482)
 * Does the same happen when you use FlexSlider?
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14280802)
 * Hi,
    I tried FlexSlider and R.slides, but the input fields were stripped out 
   and did not render
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14283287)
 * Hi,
 * I need to reproduce this issue on my local installation.
 * Please let me know how did you build this form?
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14283416)
 * It is a simple HTML form with Javascript events attached.
    I think this problem
   occurs even with a simple html element. To test, I created on the first slide,
   a div: <div id=”abc”>test</div> (you can see the word “test”).
 * With the first loading of the slide, the onclick event gets attached to the div
   id=”abc”. But once the slideshow goes to another slide, and back to this slide,
   the onlick event is lost.
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14284735)
 * Hi,
 * It worked with me using FlexSlider by doing the following:
 * 1- I downloaded jeyjoo.js and added it to my website by adding the following 
   code to the end of the current theme functions.php:
 *     ```
       function load_my_script(){
           wp_register_script( 
               'my_script', 
               get_template_directory_uri() . '/jeyjoo.js', 
               array( 'jquery' )
           );
           wp_enqueue_script( 'my_script' );
       }
       add_action('wp_enqueue_scripts', 'load_my_script');
       ```
   
 * 2- I added the following line at the start of the jeyjoo.js
    `var $= jQuery.noConflict();`
 * 3- I added the following line of code to the theme functions.php to make MetaSlider
   allow adding HTML tags to the slides captions:
    `add_filter('metaslider_filter_unsafe_html','
   __return_false');`
 * 4- I added the form to the caption of the first slide of my slideshow.
 * Please let me know if you need a video showing how the slider works.
    -  This reply was modified 5 years, 2 months ago by [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/).
 *  Thread Starter [Insurteched](https://wordpress.org/support/users/jeyjoo/)
 * (@jeyjoo)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14284982)
 * Hi, I get the same result. The Javascript is attached until the slide changes.
   Once the slide has changed. the Javascript click events are lost.
 *  [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * (@mohammedeisa)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/#post-14285050)
 * Hi,
 * Then, there should be something wrong in your script or on your website generally.
 * When I was testing the issue using your script, I removed all the code and kept
   only the form-related code. Can you try the same?
 * If this didn’t work, then there should be some conflict on your website. To figure
   out that, please test the issue when only MetaSldier and the Twenty Twenty One
   theme are active.

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/page/2/?output_format=md)

The topic ‘Attaching Javascript events to slideshow elements’ is closed to new replies.

 * ![](https://ps.w.org/ml-slider/assets/icon.svg?rev=3568997)
 * [Slider, Gallery, and Carousel by MetaSlider - Image Slider, Video Slider](https://wordpress.org/plugins/ml-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ml-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ml-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/ml-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ml-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ml-slider/reviews/)

 * 19 replies
 * 2 participants
 * Last reply from: [mohammedeisa](https://wordpress.org/support/users/mohammedeisa/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/attaching-javascript-events-to-slideshow-elements/page/2/#post-14287235)
 * Status: resolved