如何在 Jquery 中创建影响所选 div 的函数

Question

我的目标是为选择创建一个函数，当它改变时它会改变输入中的占位符。我已经做到了。

但我的问题是使该函数对我添加的任何新输入+选择有效。这样做是为了我不必每次都用新的 id 创建一个新函数。我需要一个只影响我点击的内容的全局函数。

（最后我添加了一个按钮来创建新表单，所以我需要全局函数来处理用户创建的任何新表单）

• 这是 Bootstrap 中的 html 表单（我将代码简化为基本内容）

<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());
  }); 
});

Fiddle
jQuery on()