Как создать функцию в Jquery, которая влияет на выбранный div

Question

Моя цель - создать функцию для выбора, которая при изменении меняет местозаполнитель во входных данных. Я сделал это.

Но моя проблема в том, чтобы сделать функцию действительной для любого нового ввода + выбрать, что я добавляю. И делая это так, мне не нужно каждый раз создавать новую функцию с новым идентификатором. Мне нужна глобальная функция, которая влияет только на то, что я нажимаю.

(В конце я добавляю кнопку для создания новых форм, поэтому мне нужна глобальная функция для работы с любой новой формой, которую создает пользователь )

• Это форма html в Bootstrap (я сокращаю код до необходимого)

<div id="form">

  <input name="telefono" type="text" id="telefono" placeholder="Móvil">

  <select>
    <option value="Móvil">Móvil</option>
    <option value="Casa">Casa</option>
    <option value="Trabajo">Trabajo</option>
  </select>

</div>

• Эта функция в jQuery

$(function(){   
  $("#form").find("select").change(function(){
    $("#form").find("input").attr("placeholder", $(this).find(":selected").val());
  });
});

Используя этот код, я могу изменить первую созданную мной форму div, но не новые.

Я использую Bootstrap для формы ,

Answer 1

Вы можете использовать следующий код. надеюсь, что это сработает.

$(function(){   
  $(document).on("change", "select", function(){
        var selectedValue = $(this).find(":selected").val();
        var parent = $(this).closest("#form");
            parent.find("input").attr("placeholder",selectedValue);
  });
});

Answer 2

Чтобы ваша функция работала со всеми динамически добавленными элементами select и input, вы должны передать событие change() из родительского элемента, который уже существует, когда страница первоначально загружается в элементы select, используя on():

$(function(){   
  $(document).on("change", "select", function(){
     $(this).prev("input").attr("placeholder", $(this).find(":selected").val());
  }); 
});

Скрипка
jQuery on ()