Как обращаться к динамически создаваемым элементам? - PullRequest
Новая
       1

Как обращаться к динамически создаваемым элементам?

0 голосов
/ 30 сентября 2019

Я динамически создаю несколько элементов, и я хочу работать с ними, поэтому мой код где-то примерно такой: 

$(document).ready(function() {
  var a = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + (a) + '"><input name="Name' + (a) + '"></div>')
    $('#generateInput').hide()
  })

  $("#add").click(function addValue() {
    $('#inputValuesArea').append('<tr><td>' + '<input val="' + $('input[name="Name' + (a) + '"]').val() + '" readonly="readonly">' +
      '</td><td>' + '<button id="button' + (a) + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#add').hide();
    $('#generateInput').show();
    a++;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="divArea">
</div><button id="generateInput">
    Generate
    </button>
<button id="add">
    Add
    </button>
<table id="inputValuesArea">
</table>

Что я делаю: создаю ввод-> скрываю его и добавляю значение к другому вводу с помощью кнопки. Что я хочу: если я создаю несколько входов, я хочу .show() конкретный, чтобы отредактировать его значение. Я не знаю, как ссылаться на этот скрытый ввод, потому что я не могу получить его Id

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Если вы добавляете несколько входов и пытаетесь разрешить редактирование каждого при нажатии кнопки редактирования, тогда вы можете идентифицировать выбранный вход на основе его положения, используя eq, а не атрибут id.

Следующее позволяет добавлять несколько входов и редактировать свойство readonly для демонстрации, но вы можете использовать объект currentInput, чтобы делать с ним все, что вам нужно. 

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + a + '"><input name="Name' + a + '"></div>')

    a++;
  });

  $("#add").click(function() {
    var nextInputVal = $('input[name="Name' + b + '"]').val();
    $('#inputValuesArea').append('<tr><td>' + '<input value="' + nextInputVal + '" readonly="readonly">' +
      '</td><td>' + '<button class="edit-button" id="button' + b + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#generateInput').show();
    b++;
  });

  $('body').on('click', '.edit-button', function()
  {
    var pos = $('.edit-button').index($(this));
    var currentInput =  $('#inputValuesArea input').eq(pos);
    currentInput.removeAttr('readonly');
  });
});

https://jsfiddle.net/xqcfsojv/2/

1 голос
/ 30 сентября 2019

В следующем коде:- Я держу кнопку «Создать» для тестирования,- Я создал функцию для вас, чтобы утешать все вновь созданные входы каждый раз, когда вы создаете один,- Обратите внимание на новое использование и место переменной 'a'- Обратите внимание, что я использую атрибут «id» для создания нового ввода вместо того, чтобы использовать атрибут «name», чтобы было легче при попытке обработать этот новый ввод- Результат, каждый раз, когда вы создаете новый ввод, он отображается в консоли со всеми ранее созданными входами, вы можете изменить это в соответствии со своими потребностями

<!doctype html>
<html>

<head>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="divArea">
  </div><button id="generateInput">
                Generate
                </button>
  <button id="add">
                Add
                </button>
  <table id="inputValuesArea">
  </table>


  <script>
    $(document).ready(function() {
      var a = 0;
      $('#generateInput').click(function() {
        a = a + 1;
        $('#divArea').append('<div id="div' + (a) + '"><input id="elementID' + (a) + '"></div>')
        //$('#generateInput').hide()   ;    
        consoleCreatedElements();
      })

      function consoleCreatedElements() {
        for (let i = 1; i <= a; i++) {
          console.log($("#elementID" + i));
        }
      }

      $("#add").click(function addValue() {
        $('#inputValuesArea').append('<tr><td>' + '<input val="' + $('input[name="Name' + (a) + '"]').val() + '" readonly="readonly">' +
          '</td><td>' + '<button id="button' + (a) + '"type="button">Edit</button>' + '</td></tr>');
        $('#divArea').hide();
        $('#add').hide();
        $('#generateInput').show();
        a++;
      });
    });
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...