Question

我尝试在匿名函数定义中为具有特定类的链接附加一个单击处理程序，但遗憾的是它不起作用。为什么呢？

(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);

使用过的HTML标记如下所示：

<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>

我不得不承认，我使用MediaElement.js库来播放音频文件，这很好用。如果我将使用“全局”函数处理程序定义，如下面的代码片段，它将工作。但我不明白为什么和有什么区别。

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

Answer 1

我在我的例子中错过了一个非常重要的部分。此函数之后的一段JS代码负责或不负责代码。通过将父div元素（包含所有链接）移动到DOM树中的另一个部分，删除了所有事件处理程序。而不是

SELECT *
FROM chats
WHERE (hosting1 = 'cloud.google.com' OR hosting2 = 'cloud.google.com')
GROUPBY sID;

我宁愿写

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

Answer 2

两段代码之间的显着差异在于，无法运行的代码会立即运行，而在DOM Ready上运行的代码则会运行。

问题几乎肯定是在DOM中存在具有该类的任何元素之前调用$('.media-toggle')，因此它的长度为0.

更换你的IIFE：

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

带有就绪处理程序：

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

Answer 3

您已定义了一个函数mediaPlayer，但在调用它时会出现拼写错误：medialPlayer($('.media-toggle'));

您可能会在控制台中看到错误。

此外，请确保您已在onload或$(document).on('ready')函数中使用此功能，以确保您对（.media-toggle）感兴趣的DOM节点已被删除加载。

Answer 4

您在这里缺少doc ready代码：

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

})(jQuery);

而是试试这个：

  $(init);

})(jQuery);

或者：

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

})(jQuery,document);

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

4 个答案: