Добавить событие клика на динамически создаваемое выделение

Question

Я сделал этот пример кода: https://jsfiddle.net/gwpcfp89/

Вопрос об этом событии клика:

var wrapper = $(".select-editable"); // Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

я использую #input1, #mytext1и я хочу, чтобы щелчок был динамическим. Например: если я создаю четыре выбора в таблице, четвертый выбор должен иметь событие click, подобное первому выбору (#input4 а также #mytext4).

Является ли это возможным?

Answer 1

Вы можете сделать трюк здесь.

когда вы создаете теги динамического выбора, присвойте им один атрибут, например: data-bind="<values>"

поэтому здесь должны быть ваши динамические числа, к которым вы добавляете id сделать input4

а затем напишите функцию jquery, например, здесь:

$('select').click(function(){
    var clicked_select = $(this).attr('data-bind');
    // clicked_select will be the number which dynamic element you have clicked. You can use that number with id to access that particular element as a new selector.
});

Это должно быть вашим решением.

Answer 2

I have modified you JSFiddle code - https://jsfiddle.net/pjf17exa/
As per your code, i have fixed some error and modified you code to make it dynamic input action.

// your code
var wrapper = $(".select-editable"); //Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option 
  value="dummy02">dummy02</option><option 
  value="dummy03">dummy03</option>')
});

-- which assigns event for the current row, not for the dynamic elements. So instead take parent element and assign event for the input. Where you can access current element using $(this) instance inside the function. 

// do like this
var wrapper = $("#table-editable");
wrapper.on('keypress', 'input', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs, $(this));
   $(this).prev().html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

Answer 3

Есть несколько проблем с вашим кодом:

1. Строка, которую вы назначаете data+= некоторые атрибуты HTML использовали двойные кавычки, а не одинарные, поэтому код нарушался.

2. Вы динамически создавали поля ввода с одинаковым идентификатором. Атрибут ID всегда должен быть уникальным на странице. Чтобы исправить это, я использовал i+1переменная для добавления уникального номера к идентификатору ввода. Теперь, когда идентификатор уникален, я должен изменить ваш $("#students").on('keypress', '#input1', function () { в $("#students").on('keypress', 'input', function () { поэтому он выбирает элемент по имени тега.

3. это $(wrapper).on('keypress', 'input', function () { использовал .select-editable как обработчик события, но .select-editable был динамически генерируется. Обработчик события должен быть элементом, который охватывает все элементы, которые будут генерироваться динамически, а не частью динамически генерируемого элемента. Поэтому я изменил эту часть кода, чтобы использовать #students вместо.

Я надеюсь, что это поможет объяснить, какие проблемы были.

https://jsfiddle.net/gwpcfp89/6/