update input fields after append

Question

I am working on an intranet web form. The form allows users to create "slideshows" (div field containing input fields - drop-down, textboxes, and buttons). Users can dynamically chose to add as many slideshows as they want. Users can also change the slideshow "type" (drop-down, which hides some input fields).

The way I am adding div fields is by calling a function (located in a different file). The function just appends the slideshow with unique IDs/Names for each field. I am also using jQuery UI to make these slideshows sortable. Everything works fine except for when I need to update certain input values (or hide input fields).

I need to fix two things:

• Update an input field when the slideshows are sorted/re-ordered.
• hide certain elements depending on the "type" drop-down

I know I can do that by using

$('.type').change(function () { // hide elements });
$( "#main" ).sortable({ update: function() { // update elements}});

but it seems jQuery doesn't allow us to easily access fields after appending.

I have searched online for possible solutions (that use "on click" events), but could not get anything to work. I am hoping someone can point me in the right direction.

Thanks.

Answer 1

Try this (updated)

    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");

Try this (untested)

$(".type").on("change", "input", function (e) {
  console.log(e.target); return sortInput("input", "submit", "hide"); 
});

Hope this helps