单击JavaScript菜单时执行操作

使用JavaScript/CSS的文本链接中的下拉菜单项

我这里有一个演示

我需要在单击每个菜单项时执行一个操作，现在它们什么都不做

HTML：

  <span class="inline-dropdown-menu">
    <a href="">Status<span class="caret"></span></a>

    <ul class="inline-dropdown-menu-list">
      <li class="bottomBorder">
        <a href="" tabindex="-1">Update Order Status</a>
      </li>
      <li>
        <a href="" tabindex="-1" data-order-item-id="123" data-status-name="pending">Pending Completion</a>
      </li>
      <li>
        <a href="" tabindex="-1" data-order-item-id="123" data-status-name="completed">Completed</a>
      </li>
    </ul>
  </span>

---

当单击上面菜单中的每个项目时，我需要运行下面的代码，该代码显示一个对话框窗口，并在确认后发送一个AJAX请求以更新订单状态

我只需要在每个按钮上添加一个连击帮助，这样我就可以访问

var statusName

和

var orderItemId

，这将在下面的AJAX请求中使用，并且这些值可以来自

datya

属性

数据顺序项id

和

数据状态名称

            // Show a confirmation Dialog to save new order status or reject and move order back t previous column
            $.confirm({
                'title': 'Update Order Record Status?',
                'message': 'You are about to update this orders Status to : ' + newStatusColumnName + '. <br />Do you wish to Continue?',
                'buttons': {
                    'Yes, Update Order Status': {
                        'class': 'blue',
                        'action': function() {
                            // make AJAX request to update order record status
                          $.ajax({
                              type: 'post',
                              url: 'orders/orderboards/updatestatus',
                              data: 'statusname=' + newStatusColumnName+'&orderitemid='+orderItemId,
                              success: function(result) {
                                if(result.success){
                                    nam.cache.currentItemStatus = newStatusColumnName;
                                  console.log('SUCCESS AJAX Order Status Save: ' + newStatusColumnName+' on order item ID:'+orderItemId);
                                }else{
                                  console.log('FAILURE AJAX did not save ' + newStatusColumnName+' on order item ID:'+orderItemId);
                                }
                              }
                          });
                        }
                    },
                    'Cancel': {
                        'class': 'gray',
                        'action': function() {
                            // need to move the order card back to its previous status column somehow!
                           $(ui.sender).sortable('cancel');
                        }
                    }
                }
            });

//显示确认对话框以保存新订单状态或拒绝并将订单移回上一列
美元。确认({
“标题”：“更新订单记录状态？”，
“消息”：“您将要将此订单状态更新为：”+newStatusColumnName+”。
是否继续？”，
“按钮”：{
“是，更新订单状态”：{
“类”：“蓝色”，
“操作”：函数（）{
//发出AJAX请求以更新订单记录状态
$.ajax({
键入：“post”，
url:'orders/orderboards/updatestatus'，
数据：“statusname=”+newStatusColumnName+”&orderitemid=”+orderitemid，
成功：功能（结果）{
如果（结果、成功）{
nam.cache.currentItemStatus=newStatusColumnName；
log（'SUCCESS AJAX Order Status Save:'+newStatusColumnName+'关于订单项ID:'+orderItemId'）；
}否则{
log（'FAILURE AJAX没有在订单项ID:'+orderItemId上保存'+newStatusColumnName+'）；
}
}
});
}
},
“取消”：{
“类”：“灰色”，
“操作”：函数（）{
//需要以某种方式将订单卡移回其以前的状态列！
$（ui.sender）.sortable（'cancel'）；
}
}
}
});

为所有这些提供

id

s：

  <li class="bottomBorder">
    <a href="" tabindex="-1" id="dd1">Update Order Status</a>
  </li>
  <li>
    <a href="" tabindex="-1" id="dd2">Pending Completion</a>
  </li>
  <li>
    <a href="" tabindex="-1" id="dd3">Completed</a>
  </li>

---

您可以将事件侦听器添加到父节点，并使用event.originalEvent.target查看节点中单击的元素。 如果您以某种方式使用类标记链接，或在链接中使用“tabindex=-1”，则您可以仅使用一个侦听器来跟踪对链接的单击：

  $("#manyItems").click(function(event){

      if (event.originalEvent.target.getAttribute("tabindex") == -1) {
      alert("Link was clicked");
      }
});

HTML:

。。。

看看这把小提琴：

---

您可以为列表中要单击的每个项目添加全局

类

，就像注释中提到的@Praveen Kumar一样，请参见以下示例：

<ul class="inline-dropdown-menu-list">
     <li class="bottomBorder">
        <a href="" tabindex="-1">Update Order Status</a>
     </li>
     <li>
        <a class='ajax_link' href="" tabindex="-1" data-order-item-id="123" data-status-name="pending">Pending Completion</a>
     </li>
     <li>
        <a class='ajax_link' href="" tabindex="-1" data-order-item-id="123" data-status-name="completed">Completed</a>
     </li>
 </ul>

---

希望这有帮助。

您可以使用以下JavaScript并将其包装在

$中。确认（{

..脚本）

$('.inline-dropdown-menu-list li a').on('click', function(){

});

---

每当出现

抱歉，我要补充的是，这些菜单中的每一个都会在页面上出现数百次。这是一个看板，每个菜单上都会有这个按钮card@JasonDavis改为添加类。并使用
$（this）.data（“item id”）
获取它是哪个项目。我用JSFIDLE更新了我的答案
  <span id="manyItems" class="inline-dropdown-menu">
    <a href="">Status<span class="caret"></span></a>

    <ul class="inline-dropdown-menu-list">
      <li class="bottomBorder">
        <a href="" id="item1" tabindex="-1">Update Order Status</a>
      </li>...

<ul class="inline-dropdown-menu-list">
     <li class="bottomBorder">
        <a href="" tabindex="-1">Update Order Status</a>
     </li>
     <li>
        <a class='ajax_link' href="" tabindex="-1" data-order-item-id="123" data-status-name="pending">Pending Completion</a>
     </li>
     <li>
        <a class='ajax_link' href="" tabindex="-1" data-order-item-id="123" data-status-name="completed">Completed</a>
     </li>
 </ul>

$('.inline-dropdown-menu-list').on('click','.ajax_link',function(){
        //---HERE  you can get statusName & orderItemId like following
        var statusName = $(this).data('status-name');
        var orderItemId = $(this).data('order-item-id');
        //------------------

        // Show a confirmation Dialog to save new order status or reject and move order back t previous column
        $.confirm({
            'title': 'Update Order Record Status?',
            'message': 'You are about to update this orders Status to : ' + newStatusColumnName + '. <br />Do you wish to Continue?',
            ......
});

$('.inline-dropdown-menu-list li a').on('click', function(){

});