jQuery在匿名函数定义中使用on（）附加单击处理程序

Question

I try to attach a click handler for links with a specific class within an anonymous function definition which is unfortunately not working. Why?

(function($) {
  var init = function() {
    console.log('init...');
    mediaPlayer($('.media-toggle'));

    };
  var mediaPlayer = function(mediaLink) {
    console.log('media player init ...');
    console.log(mediaLink);
    mediaLink.on("click", function(e) {
        console.log('media toggle clicked ...');
        e.stopPropagation();
        e.preventDefault();
        alert('clicked');
      });
    };

  init();

})(jQuery);

The used HTML markup looks like:

<ul>
  <li>
    <a href="https://www.foo.org/audios/preview1.mp3" class="media-toggle">Preview 1</a>
    <audio src="https://www.foo.org/audios/preview1.mp3"></audio>
  </li>
  <li>
    <a href="https://www.foo.org/audios/preview2.mp3" class="media-toggle">Preview 2</a>
    <audio src="https://www.foo.org/audios/preview2.mp3"></audio>
  </li>
  <li>
    <a href="https://www.foo.org/audios/preview3.mp3" class="media-toggle">Preview 3</a>
    <audio src="https://www.foo.org/audios/preview3.mp3"></audio>
  </li>
</ul>

I have to admit, that I use the MediaElement.js library to play the audio files, which works fine. If I would use a "global" function handler definition like the code snippet below, it would work. But I don't understand why and what is the difference.

$(function(){
    $('.media-toggle').click(function(e) {
        e.preventDefault();
        alert('Clicked ...');
    });

Answer 1

I missed a very important part on my example. A piece of JS code after this function is or was responsible for the not working code. Which removed all the event handlers by moving a parent div element (with all the links inside) to another part within the DOM tree. Instead of

 $(".preview-audio").remove().insertAfter($(".foo")); 

I should rather have written

 $(".preview-audio").insertAfter($(".foo")); 

Answer 2

The notable difference between the two pieces of code is that the one which doesn't work runs immediately and the one that does runs on DOM Ready.

The problem is almost certainly that you are calling $('.media-toggle') before any elements with that class exist in the DOM, so it has a length of 0.

Replace your IIFE:

(function($) {
...
})(jQuery);

with a ready handler:

jQuery((function($) {
...
});

Answer 3

You have defined a function mediaPlayer but you have a typo when calling it: medialPlayer($('.media-toggle'));

It's likely you would see an error in the console.

Also, make sure you've got this inside an onload or $(document).on('ready') function to ensure that the DOM node you're interested in ( .media-toggle ) has been loaded.

Answer 4

You are missing the doc ready code in here:

  init();// possibly element is not rendered.

})(jQuery);

Instead try this:

  $(init);

})(jQuery);

Or:

(function($,document) {
  ....
  $(document).ready(init);

})(jQuery,document);