Question

如果我使用id属性删除按钮它不起作用。当我用class属性创建它时它正在工作。为什么它不使用id？

$(function() {
  $("#btn").on("click", function() {
    var val = $("#yzbr").val();
    if (val !== '') {
      var elem = $("<li></li>").text(val);
      $(elem).append("<button id='rem'>REMOVE</button>");
      $("#ekl").append(elem);
      $("input").val("");
      $("#rem").on("click", function() {
        $(this).parent().remove();
      })
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>list</h1>
<input type="text" id="yzbr">
<button id="btn">add</button>
<ol id="ekl"></ol>

Answer 1

您不能在同一页面上拥有多个ID。使用或类... ... ...根本不使用任何东西！
将点击行为直接分配给创建的按钮。

＆＃13;

jQuery(function( $ ) {

  // Use properly named functions,
  // so you'll know what it does without reading any code
  function addItemToList () {
  
    var val = $.trim( $("#name").val() );   // Trim whitespaces!!
    if (val === '') return;                 // Do nothing if no value
    $("#name").val("");                     // Reset input field

    $("<li/>", { // Create LI
      text: val,
      appendTo: "#list",       // appendTo #list sonds like poetry
      append: $("<button/>", { // append a BUTTON
        text: "REMOVE",
        on: {
          click: function() {
            $(this).closest("li").remove();
          }
        }
      })
    });
    
  }


  $("#add").on("click", addItemToList); // :)
  
  // Other DOM ready code here

});

＆＃13;

<input type="text" id="name">
<button id="add">ADD</button>
<ol id="list"></ol>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

＆＃13;

在使用类时，为什么这不适用于id

1 个答案: