Question

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

我在这里有一个演示http://jsfiddle.net/jasondavis/bvy7u2nt/

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

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>

JavaScript

// Show Dropdown Menu when link is clicked
$(function(){

  var inlineDropdownMenuContainer = $(this).find(".inline-dropdown-menu"),
      inlineDropdownMenuLists = $(this).find(".inline-dropdown-menu-list");

  inlineDropdownMenuContainer.click(function(e){
    e.stopPropagation();
    inlineDropdownMenuLists.hide(); // to hide other drop down
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
  });

  $(document).click(function(event){
    //inlineDropdownMenuLists.not(':hidden').hide();

    if (!inlineDropdownMenuContainer.is(event.target) && inlineDropdownMenuContainer.has(event.target).length === 0) {
        inlineDropdownMenuLists.hide();
    }


  });

});

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

我只需要帮助将每个按钮附加一个按钮，这将使我能够访问var statusName和var orderItemId，这将在我的下面的AJAX请求中使用，并且值可以来自{{1 } {} {} {}} {} {}}。{/}

datya

Answer 1

为所有这些提供<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>：

$("#dd1").click(function () {
  alert("You have clicked Update Order Status!");
});
$("#dd1").click(function () {
  alert("You have clicked Pending Completion!");
});
$("#dd1").click(function () {
  alert("You have clicked Completed!");
});

在JavaScript中执行此操作：

similar

Answer 2

您可以向父节点添加事件侦听器，并使用 event.originalEvent.target 查看节点内的哪个元素被单击。如果您以某种方式使用类标记链接或使用链接中的“tabindex = -1”，则只需使用一个侦听器即可跟踪链接上的单击：

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

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

HTML：

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

看看这个工作小提琴：

http://jsfiddle.net/bvy7u2nt/3/

Answer 3

您可以为列表中要点击的每个项目添加全局class，就像评论中提到的 @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>

并将活动点击附加到课程ajax_link，然后获取statusName＆amp;单击锚点orderItemId然后在对话框中替换它们，请参阅以下代码：

$('.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?',
            ......
});

希望这有帮助。

Answer 4

您可以使用以下JavaScript并将其包装在$.confirm({ ...脚本中。

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

});

只要点击带有<a>类的div中<li>内的.inline-dropdown-menu-list标记，就会执行此操作。

我已经创建了一个JSFiddle来演示它......我还没有为$ .confirm导入脚本工作但是如果你检查console.log输出，你会看到它返回您点击的按钮：

http://jsfiddle.net/eqLo7d4h/

单击JavaScript菜单时执行操作

4 个答案: