javascript - 如何在具有相同CSS类名的所有元素的点击功能上调用合金用户界面

Question

我想要的是我有几个像

这样的链接

<a href="javascript:void(0)" class="popup-link">sample Link 1</a> <a href="javascript:void(0)" class="popup-link">sample Link 2</a>

我想在用户点击链接时调用静态 html。为此我写了一段代码

    AUI().ready(
 'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.popup-link').on('click',
      function() {
         var dialog = new A.Dialog({
              bodyContent: 'Loading...',
              centered: true,
              title: 'Sample Popup Content',
              width: 400,
              height:600
            }
          ).render();

          dialog.plug(
            A.Plugin.IO,
            {
              autoLoad: false,
              uri: '/html/sample.html'
            }
          );

          dialog.io.start();
        });
  });

但这不起作用，当我点击链接时它根本不调用该函数，我也试过这个，但同样的事情

    AUI().ready(
  'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.sample-popup').each(function() {
      this.on('click', function(A){
           .....
           ......

知道这里出了什么问题吗？

Answer 1

我终于明白为什么它不起作用了。我也在点击函数中使用了相同的对象“A”。

应该是这样的:(看看变量名事件)

AUI().ready(
  'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.sample-popup').each(function() {
      this.on('click', function(event){
           .....
           ......