Question

我有一个HTML表，我在其中创建下拉列表的一栏中，该列表将包含两个前进或显示链接的链接，我已成功创建了下拉按钮，但下拉链接未显示

请参考代码段

var currentlyClickedCode = "";
	$(document).ready(function (){
   
		  $dropdown = $("#contextMenu");
	      $(".actionButton").click(function() {
	        //move dropdown menu
	        $(this).after($dropdown);
	        //update links	
	        $(this).dropdown();

	        currentlyClickedCode = $(this).attr("data-place");
	        console.log(currentlyClickedCode)
	        
	      });
		var tableData=[
		               {
		            	    "CATEGORY CODE": "C001",
		            	    "CATEGORY NAME": "Beverages",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 18
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C002",
		            	    "CATEGORY NAME": "Shakes",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 80
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C003",
		            	    "CATEGORY NAME": "Juices",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 70
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C004",
		            	    "CATEGORY NAME": "Soups",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 55
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C005",
		            	    "CATEGORY NAME": "Cookies",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 46
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C006",
		            	    "CATEGORY NAME": "Buns",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 21
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C007",
		            	    "CATEGORY NAME": "Breads",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 40
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C008",
		            	    "CATEGORY NAME": "Rusks",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 52
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C009",
		            	    "CATEGORY NAME": "Biscuits",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 38
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C010",
		            	    "CATEGORY NAME": "Puff",
		            	    "QUANTITY": "4.0000",
		            	    "AMOUNT": 132
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C011",
		            	    "CATEGORY NAME": "Savouries",
		            	    "QUANTITY": "0.1000",
		            	    "AMOUNT": 29
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C012",
		            	    "CATEGORY NAME": "Cake",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 46
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C014",
		            	    "CATEGORY NAME": "IceCream",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 70
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C019",
		            	    "CATEGORY NAME": "Curry",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 180
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C021",
		            	    "CATEGORY NAME": "Starter",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 165
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C022",
		            	    "CATEGORY NAME": "Roti",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 60
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C023",
		            	    "CATEGORY NAME": "Chawal",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 185
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C024",
		            	    "CATEGORY NAME": "Dessert",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 66
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C026",
		            	    "CATEGORY NAME": "Soup",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 100
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C027",
		            	    "CATEGORY NAME": "Salad",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 50
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C028",
		            	    "CATEGORY NAME": "Set Menu",
		            	    "QUANTITY": "3.0000",
		            	    "AMOUNT": 1290
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C029",
		            	    "CATEGORY NAME": "Pastry",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 80
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C030",
		            	    "CATEGORY NAME": "Packed Meals",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 25
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C031",
		            	    "CATEGORY NAME": "Packaging",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 5
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C034",
		            	    "CATEGORY NAME": "Bhath",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 68
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C036",
		            	    "CATEGORY NAME": "Snacks",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 10
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C037",
		            	    "CATEGORY NAME": "Breakfast",
		            	    "QUANTITY": "5.0000",
		            	    "AMOUNT": 119
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C038",
		            	    "CATEGORY NAME": "Evening Snacks",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 70
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C040",
		            	    "CATEGORY NAME": "Sandwich",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 75
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C042",
		            	    "CATEGORY NAME": "Burger",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 75
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C043",
		            	    "CATEGORY NAME": "Meals",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 220
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C044",
		            	    "CATEGORY NAME": "Curd",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 12
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C048",
		            	    "CATEGORY NAME": "Combo",
		            	    "QUANTITY": "2.0000",
		            	    "AMOUNT": 180
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C051",
		            	    "CATEGORY NAME": "Silver Thali",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 450
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C052",
		            	    "CATEGORY NAME": "Sweets",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 115
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C054",
		            	    "CATEGORY NAME": "Instant Mixes",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 66
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C055",
		            	    "CATEGORY NAME": "RTE",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 228
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C057",
		            	    "CATEGORY NAME": "Spices",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 40
		            	  },
		            	  {
		            	    "CATEGORY CODE": "C061",
		            	    "CATEGORY NAME": "Fast Food",
		            	    "QUANTITY": "1.0000",
		            	    "AMOUNT": 15
		            	  }
		            	]
   	  
 		 function addTable(tableData) {
    			var col = Object.keys(tableData[0]); 
    					
    			var countNum = col.filter(i => !isNaN(i)).length;
    			var num = col.splice(0, countNum); 
    			col = col.concat(num); 
    			
    			var table = document.createElement("table");

    			// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    			var tr = table.insertRow(-1); // TABLE ROW.


    			  for (var i = 0; i < col.length; i++) {
    			    var th = document.createElement("th"); // TABLE HEADER.
    			    th.innerHTML = col[i];
    	           
    			    tr.appendChild(th);
    			}

    			// ADD JSON DATA TO THE TABLE AS ROWS.
    			for (var i = 0; i < tableData.length; i++) {

    			    tr = table.insertRow(-1);

    			    for (var j = 0; j < col.length; j++) {
    			        var tabCell = tr.insertCell(-1);
    			         var tabledata = tableData[i][col[j]];
    	    if(tabledata && !isNaN(tabledata)){
    	      tabledata = parseInt(tabledata).toLocaleString('en-in')
    	    }
    	    if( tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]){
    	        a = document.createElement("a");
    	        tabCell.classList.add("dropdown");
    	        a.classList.add("btn");
    	        a.classList.add("btn-default");
    	        a.classList.add("actionButton");
    	        /*  a.classList.add("text-center"); */
    	        /*  a.setAttribute("data-place", outlet);
    	        a.setAttribute("data-plac", element); */
    	        a.setAttribute("data-toggle", "dropdown");
    	        a.setAttribute("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
    	        a.innerHTML = tabledata;
    	        tabCell.appendChild(a);
    	    } else {
    	        span = document.createElement("span");
    	        span.innerHTML = tabledata;
    	        tabCell.appendChild(span)
    	    } 

            
    	    
    	    
    	    
    	    
    	    
    	    
    	    
 
    	              if (j > 1)
    	            	  {
    	             
    	              tabCell.classList.add("text-right");
    	            	  }
    			    }
    			}

    			// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    			var divContainer = document.getElementById("table1");
    			divContainer.innerHTML = "";
    			divContainer.appendChild(table);
    			table.classList.add("table");
    			 table.classList.add("table-striped");
    			 table.classList.add("table-bordered");
 
    			}
		addTable(tableData)
 		
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link
      rel="stylesheet"
      type="text/css"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
    />
     <script
      type="text/javascript"
      src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"
    ></script>
<div id="table1"> 

</div>
   <ul id="contextMenu" class="dropdown-menu" role="menu">
      <li><a href="test1.jsp" class="link1">BillSummary</a></li>
        <li><a href="test.jsp" class="link2">Item Summary</a></li>
      
    </ul>

我上面的代码段中的

运行成功并创建了下拉按钮，但未显示链接。

我想要实现的是

单击下拉按钮时显示下拉链接。
在控制台上单击哪个下拉按钮进行打印

我正在采用正确的方法，但不知道它出了什么问题。所以请指导我，任何帮助或指导都会有所帮助。

我的代码在此"TypeError: $(...).dropdown is not a function上抛出了错误

please check this link

Answer 1

您不能将.click()事件侦听器附加到动态生成的元素上。您必须改用.on()：

$(document).on("click",".actionButton",function() {
   ... code here ... 
}

var currentlyClickedCode = "";
$(document).ready(function() {

  $dropdown = $("#contextMenu");
  $(document).on("click",".actionButton",function() {
    //move dropdown menu
    $(this).after($dropdown);
    //update links	
    $(this).dropdown();

    currentlyClickedCode = $(this).attr("data-place");
    console.log(currentlyClickedCode);

  });
  var tableData = [{
      "CATEGORY CODE": "C001",
      "CATEGORY NAME": "Beverages",
      "QUANTITY": "1.0000",
      "AMOUNT": 18
    },
    {
      "CATEGORY CODE": "C002",
      "CATEGORY NAME": "Shakes",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C003",
      "CATEGORY NAME": "Juices",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C004",
      "CATEGORY NAME": "Soups",
      "QUANTITY": "1.0000",
      "AMOUNT": 55
    },
    {
      "CATEGORY CODE": "C005",
      "CATEGORY NAME": "Cookies",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C006",
      "CATEGORY NAME": "Buns",
      "QUANTITY": "1.0000",
      "AMOUNT": 21
    },
    {
      "CATEGORY CODE": "C007",
      "CATEGORY NAME": "Breads",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C008",
      "CATEGORY NAME": "Rusks",
      "QUANTITY": "1.0000",
      "AMOUNT": 52
    },
    {
      "CATEGORY CODE": "C009",
      "CATEGORY NAME": "Biscuits",
      "QUANTITY": "1.0000",
      "AMOUNT": 38
    },
    {
      "CATEGORY CODE": "C010",
      "CATEGORY NAME": "Puff",
      "QUANTITY": "4.0000",
      "AMOUNT": 132
    },
    {
      "CATEGORY CODE": "C011",
      "CATEGORY NAME": "Savouries",
      "QUANTITY": "0.1000",
      "AMOUNT": 29
    },
    {
      "CATEGORY CODE": "C012",
      "CATEGORY NAME": "Cake",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C014",
      "CATEGORY NAME": "IceCream",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C019",
      "CATEGORY NAME": "Curry",
      "QUANTITY": "1.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C021",
      "CATEGORY NAME": "Starter",
      "QUANTITY": "1.0000",
      "AMOUNT": 165
    },
    {
      "CATEGORY CODE": "C022",
      "CATEGORY NAME": "Roti",
      "QUANTITY": "1.0000",
      "AMOUNT": 60
    },
    {
      "CATEGORY CODE": "C023",
      "CATEGORY NAME": "Chawal",
      "QUANTITY": "1.0000",
      "AMOUNT": 185
    },
    {
      "CATEGORY CODE": "C024",
      "CATEGORY NAME": "Dessert",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C026",
      "CATEGORY NAME": "Soup",
      "QUANTITY": "1.0000",
      "AMOUNT": 100
    },
    {
      "CATEGORY CODE": "C027",
      "CATEGORY NAME": "Salad",
      "QUANTITY": "1.0000",
      "AMOUNT": 50
    },
    {
      "CATEGORY CODE": "C028",
      "CATEGORY NAME": "Set Menu",
      "QUANTITY": "3.0000",
      "AMOUNT": 1290
    },
    {
      "CATEGORY CODE": "C029",
      "CATEGORY NAME": "Pastry",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C030",
      "CATEGORY NAME": "Packed Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 25
    },
    {
      "CATEGORY CODE": "C031",
      "CATEGORY NAME": "Packaging",
      "QUANTITY": "1.0000",
      "AMOUNT": 5
    },
    {
      "CATEGORY CODE": "C034",
      "CATEGORY NAME": "Bhath",
      "QUANTITY": "1.0000",
      "AMOUNT": 68
    },
    {
      "CATEGORY CODE": "C036",
      "CATEGORY NAME": "Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 10
    },
    {
      "CATEGORY CODE": "C037",
      "CATEGORY NAME": "Breakfast",
      "QUANTITY": "5.0000",
      "AMOUNT": 119
    },
    {
      "CATEGORY CODE": "C038",
      "CATEGORY NAME": "Evening Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C040",
      "CATEGORY NAME": "Sandwich",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C042",
      "CATEGORY NAME": "Burger",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C043",
      "CATEGORY NAME": "Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 220
    },
    {
      "CATEGORY CODE": "C044",
      "CATEGORY NAME": "Curd",
      "QUANTITY": "1.0000",
      "AMOUNT": 12
    },
    {
      "CATEGORY CODE": "C048",
      "CATEGORY NAME": "Combo",
      "QUANTITY": "2.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C051",
      "CATEGORY NAME": "Silver Thali",
      "QUANTITY": "1.0000",
      "AMOUNT": 450
    },
    {
      "CATEGORY CODE": "C052",
      "CATEGORY NAME": "Sweets",
      "QUANTITY": "1.0000",
      "AMOUNT": 115
    },
    {
      "CATEGORY CODE": "C054",
      "CATEGORY NAME": "Instant Mixes",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C055",
      "CATEGORY NAME": "RTE",
      "QUANTITY": "1.0000",
      "AMOUNT": 228
    },
    {
      "CATEGORY CODE": "C057",
      "CATEGORY NAME": "Spices",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C061",
      "CATEGORY NAME": "Fast Food",
      "QUANTITY": "1.0000",
      "AMOUNT": 15
    }
  ]

  function addTable(tableData) {
    var col = Object.keys(tableData[0]);

    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);

    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1); // TABLE ROW.


    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];

      tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableData.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableData[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        if (tableData[i]['CATEGORY CODE'] === tableData[i][col[j]]) {
          a = document.createElement("a");
          tabCell.classList.add("dropdown");
          a.classList.add("btn");
          a.classList.add("btn-default");
          a.classList.add("actionButton");
          /*  a.classList.add("text-center"); */
          /*  a.setAttribute("data-place", outlet);
          a.setAttribute("data-plac", element); */
          a.setAttribute("data-toggle", "dropdown");
          a.setAttribute("data-place", tableData[i]['CATEGORY CODE']); //this to print on console which drop-down button is clicked.
          a.innerHTML = tabledata;
          tabCell.appendChild(a);
        } else {
          span = document.createElement("span");
          span.innerHTML = tabledata;
          tabCell.appendChild(span)
        }










        if (j > 1) {

          tabCell.classList.add("text-right");
        }
      }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("table1");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");

  }
  addTable(tableData)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="table1">

</div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="test1.jsp" class="link1">BillSummary</a></li>
  <li><a href="test.jsp" class="link2">Item Summary</a></li>

</ul>

下拉链接未显示在HTML表中

1 个答案: