Question

这是我的点击事件

$('body').on('click', 'ul.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

这就是我使用notifi类创建这些元素的方法

$.each(response['notifResult'], function( index, value ) {
            $('.notifMenu').append('<li><a href="#"><i data-id="' + value['id'] + '" class="' + value['icon'] + ' text-purple notifi"></i> ' + value['notificationText'] + '</a></li>');
          });

这是显示它们的地方

<ul class="dropdown-menu">
              <li class="header">You have <span class="notifNumberRep">...</span> notifications</li>
              <li class="header">Click notifications to mark them as readed.</li>
              <li>
                <!-- inner menu: contains the actual data -->
                <ul class="menu notifMenu">

                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>

Answer 1

您错过了班级名称＆＃39; notifi＆＃39;从<ul />开始，使jQuery模式起作用。请参阅此小提琴，了解您的代码的工作示例。

https://jsfiddle.net/fng33ogr/1/

<ul class="dropdown-menu">

应该是：

<ul class="dropdown-menu notifi">

<强>更新

查询已更改为ul.notifi a，已将id数据属性移至a。见最新小提琴。

Answer 2

获取您委派的选择器的ul - notifi类位于i标记上：

$('body').on('click', '.notifi', function() {
  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});

如果您想在单击锚点或li时触发事件，请将class和data属性移动到相应的元素

例如，如果您希望li触发上述事件：

$('.notifMenu').append('<li data-id="' + value['id'] + '" class="notifi"><a href="#"><i class="' + value['icon'] + ' text-purple"></i> ' + value['notificationText'] + '</a></li>');

但是，我会将它绑定到您的锚点，因为您可以阻止锚点的默认操作（这可能会将您带到另一个页面）。将您的事件绑定更改为：

$('body').on('click', '.notifi', function(e) {
  e.preventDefault(); // prevent the ddefault action of the anchor so the following will be processed

  var id = $(this).attr("data-id");
  console.log('clicked');
  alert(id);
});


// add data and class to anchor
$.each(response['notifResult'], function(index, value) {
  $('.notifMenu').append('<li><a href="#" data-id="' + value['id'] + '" class="notifi"><i class="' + value['icon'] + ' text-purple "></i> ' + value['notificationText'] + '</a></li>');
});

Answer 3

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <App>
    <Page
      enableScrolling="false"> 
      <content>
        <IconTabBar
          expanded="true" 
          expandable="false"> 
          <items>
            <IconTabFilter
              text="foobar">
              <ScrollContainer
                height="100%"
                width="100%"
                horizontal="true"
                vertical="true"
                focusable="true">

                <!-- content to scroll -->

              </ScrollContainer>
            </IconTabFilter>
          </items>
        </IconTabBar>  
      </content>
    </Page>
  </App>
</mvc:View>

更具体地将父选择器添加为ul，将子选择器类添加为“.notify”

单击事件上的jquery不起作用

3 个答案: