javascript html jquery

Почему функция .data() в jQuery не работает?

У меня проблемы с функцией .data(), и это уже второй раз. Если я использую здесь .data(), то она не добавляет атрибут data:

delete_button.data('to-do', toDoCount);

Как и в прошлый раз, такой способ работает

delete_button.attr('data-to-do', toDoCount);

Я делал всё как в документаций.

// Create an initial toDoCount variable
    var toDoCount = 0;

    //  On Click event associated with the add-to-do function
    $("#add-to-do").on("click", function(event) {
      // prevent form from submitting
      event.preventDefault();

      // Get the to-do "value" from the textbox and store it a variable
      var thing_todo = $('#to-do').val().trim();

      // Create a new variable that will hold a "<p>" tag.
      // Then give it an ID in the following form:
      // "item-4" or "item-3" or "item-99", where the number is equal to toDoCount.
      // Then append the to-do "value" as text to this <p> element.
      var new_todo_element = $("<p>");
      new_todo_element.attr('id', 'item-' + toDoCount);
      new_todo_element.append(' ' + thing_todo);

      // Create a button with unique identifiers based on what number it is in the list. Again use jQuery to do this.
      // Give your button a data attribute called data-to-do and a class called "checkbox".
      // Lastly append the letter X inside.
      var delete_button = $("<button>");
      delete_button.data('to-do', toDoCount);
    //   delete_button.attr('data-to-do', toDoCount);
      delete_button.addClass('checkbox');
      delete_button.append('X');

      // Append the button to the to do item
      new_todo_element.prepend(delete_button);

      // Add the button and toDoItem to the to-dos div
      $('#to-dos').append(new_todo_element);

      // Clear the textbox when done
      $('#to-do').val('');

      // Add to the toDoCount
      toDoCount += 1;

    });

    //  When a user clicks a check box then delete the specific content
    //  (NOTE: Pay attention to the unusual syntax here for the click event.
    //  Because we are creating click events on "dynamic" content, we can't just use the usual "on" "click" syntax.)
    $(document.body).on("click", ".checkbox", function() {

      // Get the number of the button from its data attribute and hold in a variable called  toDoNumber.
    //   var item_id =

      // Select and Empty the specific <p> element that previously held the to do item number.

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>

  <meta charset="UTF-8">
  <title>To Do App!</title>

  <style>
    #todo-item {
      font-weight: 700;
      font-size: 2em;
    }
  </style>
</head>

<body>

  <!-- Title -->
  <h1>My To Do's!</h1>

  <!-- Input Form -->
  <form>
    <span id="todo-item">To Do Item: <input id="to-do" type="text" ><input id="add-to-do" value="Add Item" type="submit"></span>
  </form>

  <hr>

  <!-- To-Do List -->
  <div id="to-dos"></div>

Как я могу установить атрибут data на этой кнопке? Спасибо

0
1
1 ответ

Не волнуйся, ты все делаешь правильно. Установка значений с помощью функции data() не меняет код HTML, но все же позволяет получить его значение позже с помощью data(). Из документации:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Причина этого, конечно же, оптимизация - зачем вообще редактировать HTML, если вы собираетесь получить его позже тоже через jQuery? Если вам действительно нужно отредактировать документ HTML, то attr() - это ваш друг.