Jquery 追加后更新输入字段

Jquery 追加后更新输入字段,jquery,append,jquery-ui-sortable,Jquery,Append,Jquery Ui Sortable,我正在做一个内联网表单。表单允许用户创建“幻灯片”(包含输入字段的div字段-下拉列表、文本框和按钮)。用户可以动态选择添加任意数量的幻灯片。用户还可以更改幻灯片“类型”(下拉列表,其中隐藏了一些输入字段) 我添加div字段的方法是调用函数(位于不同的文件中)。该函数只是为每个字段添加具有唯一ID/名称的幻灯片。 我还使用jqueryui对这些幻灯片进行排序。除了需要更新某些输入值(或隐藏输入字段)外,其他一切都正常工作 我需要解决两件事: 幻灯片排序/重新排序时更新输入字段 根据“类型”下拉

我正在做一个内联网表单。表单允许用户创建“幻灯片”(包含输入字段的div字段-下拉列表、文本框和按钮)。用户可以动态选择添加任意数量的幻灯片。用户还可以更改幻灯片“类型”(下拉列表,其中隐藏了一些输入字段)

我添加div字段的方法是调用函数(位于不同的文件中)。该函数只是为每个字段添加具有唯一ID/名称的幻灯片。 我还使用jqueryui对这些幻灯片进行排序。除了需要更新某些输入值(或隐藏输入字段)外,其他一切都正常工作

我需要解决两件事:

  • 幻灯片排序/重新排序时更新输入字段
  • 根据“类型”下拉列表隐藏某些元素
我知道我可以通过使用

$('.type').change(function () { // hide elements });
$( "#main" ).sortable({ update: function() { // update elements}});
但jQuery似乎不允许我们在添加后轻松访问字段

我在网上搜索了可能的解决方案(使用“点击”事件),但没有找到任何可行的方法。我希望有人能给我指出正确的方向

谢谢。

试试这个(更新版)

试试这个(未经测试)


希望这有帮助

可以发布一个结果为
html
的示例吗?谢谢。我已经复制并粘贴了使用过的代码,谢谢你查看!请看邮报。可以部分满足第二个列出的要求,也可以使用
type=text
进行尝试。似乎奏效了。但是,您更愿意将jquery
方法
作为变量传递给post实例中的
.hide()
,例如
sortInput(type,.hide()){},尝试了几种方法,没有成功;将继续尝试实现该功能的选项。应能够通过修改工件以包括其他方法,选择并可能满足所列第一项要求。希望这有助于查看更新的帖子。谢谢分享。我只是想说非常感谢你的帮助。我真的很感激。我只是想理解这个代码-你能解释一下吗?如何在下拉更改时调用该函数(对于我的第一个需求)<代码>$('.type').change(函数(){sortInput()})将不起作用,因为它不是在“附加div”上触发的。@CheekuJee请参阅更新的帖子。谢谢分享。希望这对你有帮助!!非常感谢你的帮助。非常感谢!:)
    function sortInput(el, type, action, val) {
      /* `el` : all `input` elements, or, `el#id`, `el.class`, `el[attr]` as `jquery` `object` */
      var inputs = $(el);
      /* `type` of `$(el)`, i.e.g., `text`, `submit`, `hidden`, etc.  */
      var type = (type || undefined); 
      /* if no `newVal` prodided, return `$(this).val() as `default`  */
      var val = val || $(this).val();
      /* `action` to call for `$(el)`, `hide` calls jsquery `.hide()`, `val` calls jquery `.val()` with provided `val` parameter */
      $.fn.actions = (action === "hide"
             ? function() {return this.hide()} 
             : (action === "val" ? function() {return this.val(val)} : null)
             ); 
      /* jquery `.filter()` `$(el)`'s by provided `type` */
      return $(inputs).filter(function() {
      /* `return` `$(el)`, `filter()`'ed by `type`, call `$.fn.actions()` provided with `action` parameter  */
        return $(this).attr("type") === type}).actions()
    };
    /* call `sortInput()`, `.filter()` `type` `submit`, call jquery `.hide()` */
    sortInput("input", "submit", "hide");
    /* call `sortInput()`, `.filter()` `type` `text`, call jquery `.val()`, with `val` ("newVal") provided parameter */
    sortInput("input", "text", "val", "newVal");
$(".type").on("change", "input", function (e) {
  console.log(e.target); return sortInput("input", "submit", "hide"); 
});