Question

$(".drop_noti_message").on("click", function() {
  load_notification();
});

$('.noti_message').on('click', '.gotoNoti', function() {
  var noti_id = $(this).attr('name');
  set_notification_read(noti_id);

});

$(".notification_btn").on('click', function(e) {
  e.stopPropagation();
});


function load_notification() {
  $.ajax({
      dataType: "json",
      data: {
        module: 'notification',
        action: 'notification_list'
      },
    })
    .success(function(response) {
      if (response.notification) {
        var noti_title = [];
        var noti_link = [];
        var noti_content = [];
        var noti_date = [];
        var noti_id = [];
        var noti_active = [];
        response.notification.forEach(function(element, index) {
          noti_title.push(element.noti_title);
          noti_link.push(element.noti_link);
          noti_content.push(element.noti_content);
          noti_date.push(element.noti_date);
          noti_id.push(element.noti_id);
          noti_active.push(element.noti_active);
        })
        var divcontent = "";

        for (var i = 0; i < noti_title.length; i++) {
          var divcontent = divcontent +
            '<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="true"></button><ul class="dropdown-menu" aria-labelledby="" role="menu"><a class="dropdown-item" href="javascript:set_notification_unread(' + noti_id[i] + ');">Unread</a><a class="dropdown-item" href="javascript:set_notification_read(' + noti_id[i] + ');">Read</a></ul><a class="left-menu-link gotoNoti" name="' + noti_id[i] + '" href="' + noti_link[i] + '"><li class="li_row1" noti_id="' + noti_id[i] + '"><b>' + noti_title[i] + '</b></span><br/>' + noti_content[i] + '<br/><span style="float: right;padding-right: 10px;color:#c0bcd2;"><small>' + noti_date[i] + '</small></span><br/><input class="activeno" type="text" hidden value="' + noti_active[i] + '"/></li></a><div class="dropdown-divider" style="padding-top:0px;padding-bottom: 0px;"></div>';
        }
        $('.noti_message').html(divcontent);
      } else {
        $('.noti_message').html('<div style="padding-left:40%;font-size: 1.3em;">No notification.</div>').css({
          'overflow-y': 'hidden',
          'height': '40px'
        });
      }
    })
    .fail(function() {

    })
    .done(function() {
      set_notificationColor();
      count_notification_unread();
    });
}

<div class="dropdown dropdown-avatar" style="padding-left: 5px;padding-right: 10px;">
  <span class="label label-pill label-danger count" style="border-radius:10px;position: absolute;margin-left: 15px;"></span>
  <a href="javascript: void(0);" data-toggle="dropdown" class="drop_noti_message" aria-expanded="false">
    <span class="notification" href="javascript:void(0);">
                            <i class="icmn icmn-earth2" style="font-size: 2.0rem;"></i>
                        </span>
  </a>
  <ul class="dropdown-menu dropdown-menu-right list-unstyled notification_btn" style="width: 400px;">
    <div style="padding-left: 10px;padding-bottom:10px;font-weight: bold;" id="header">Notifications
      <span style="float: right;"><button type="button" class="btn btn-xs btn-secondary-outline margin-inline markAllRead">Mark All as Read</button></span>
      <!-- <span style="float: right;padding-right: 10px;"><a href="#/setting"><i class="icmn icmn-cog2"></i></a></span> -->

    </div>
    <div class="dropdown-divider" style="margin-bottom: 0px;"></div>
    <div class="noti_message" style="overflow-y: scroll;height: 300px;word-wrap: break-word;" id="style-4"></div>
    <div class="dropdown-divider" style="margin-top: 0px;"></div>
    <a href="#/notification">
      <div style="text-align: center;font-weight: bold;padding-top: 5px;">See All
        <span class="ajax-load text-center new" style="display:none;position:absolute;padding-left: 7px;"><img class="animated-gif" src="https://www.wallies.com/filebin/images/loading_apple.gif" >
                                </span>
      </div>
    </a>
  </ul>
</div>

目前，我正在进行通知功能，我想在通知的每一行中添加“读取”和“未读”作为下拉按钮。但是，它不起作用，我不知道为什么。这是我的代码。

for(var i=0; i<noti_title.length ; i++)
{
    var divcontent=divcontent+
   '<div class="dropdown"><button type="button" class="btn dropdown-toggle" 
data-toggle="dropdown" aria-expanded="true"></button><ul 
class="dropdown-menu" aria-labelledby="" role="menu"><a class="dropdown-item" 
href="javascript:set_notification_unread('+noti_id[i]+');">Unread</a><a 
class="dropdown-item" href="javascript:set_notification_read('+noti_id[i]+');">Read</a></ul>
</div><a class="left-menu-link gotoNoti" name="'+noti_id[i]+'" href="'+ noti_link[i]+'">
<li class="li_row1" noti_id="'+noti_id[i]+'"><b>'+noti_title[i]+'</b>
</span><br/>'+noti_content[i]+'<br/><span style="float: right;padding-right: 10px;
color:#c0bcd2;"><small>'+noti_date[i]+'</small></span><br/><input class="activeno" 
type="text" hidden value="'+noti_active[i]+'"/></li></a><div class="dropdown-divider" 
style="padding-top:0px;padding-bottom: 0px;"></div>';
}
$('.noti_message').html(divcontent);

我正在使用Ajax来获取数据。我发现下拉按钮没有响应（不扩展）。是因为我在下拉按钮中添加了下拉按钮吗？（当点击通知按钮时，它是一个下拉按钮，然后我在通知按钮内添加另一个下拉按钮）

下拉按钮不起作用

0 个答案: