JS - jQuery Dynamic add remove Поле ввода

Question

У меня есть форма, где я добавляю динамические поля ввода (группы).

Это довольно сложная форма, а часть можно увидеть здесь: FIDDLE

Фактическая ошибка, я получаю на Консул:

Error: uncaught exception: query function not defined for Select2 s2id_autogen1 

Когда у меня есть поля уже в виде (первые два, например) кнопки EDIT и REMOVE будут работать нормально.

Моя проблема заключается в том, что REMOVE кнопки (стилизованное поле ввода) не работаю для динамически ADDED полеев (на самом деле «прилагаемого» с помощью JS и заселенных из PHP)

Примечания по коде: я знаю код бардак :-(. это был унаследован и будет очищено в ближайшее время.

он был скопирован и вставлен из вывода HTML.

ADD, REMOVE и EDIT фактически стиле, как кнопки (слишком длинные и не имеющие отношения к наклеить)

Фактический источник PHP и она охватывает более нескольких файлов (так это JS), и, таким образом, немного слишком сложна, чтобы показать здесь ,

UPDATE: Код согласно многочисленным просьбам :-)

public function show_field_repeater($field, $meta) { 
    global $post; 
    // Get Plugin Path 
    $plugin_path = $this->SelfPath; 
    $this->show_field_begin($field, $meta); 
    $class = ''; 
     if ($field['sortable']) 
     $class = " repeater-sortable"; 
    echo "<div class='at-repeat".$class."' id='{$field['id']}'>"; 

    $c = 0; 

    $meta = get_post_meta($post->ID,$field['id'],true); 


     if (count($meta) > 0 && is_array($meta)){ 
     foreach ($meta as $me){ 
      //for labling toggles 
      $mmm = isset($me[$field['fields'][0]['id']])? $me[$field['fields'][0]['id']]: ""; 
      echo '<div class="at-repater-block at-repater-block-'.$c.$field['id'].'"><h3>'.$mmm.' 
      <span class="at-re-remove"> 
      <input id="remove-'.$c.$field['id'].'" class="buttom button-primary" type="submitkb" value="Remove '.$field['name'].'" accesskey="x" name="removek"> 
      </span>'; 


      echo '<script> 
     jQuery(document).ready(function() { 
       jQuery("#remove-'.$c.$field['id'].'").on(\'click\', function() { 
        var answer = confirm("Are you sure you want to delete this field ??")  
        if(!answer){ 
         event.preventDefault();  
        } 


        jQuery(".at-repater-block-'.$c.$field['id'].'").remove(); 

       }); 
      }); 
     </script>'; 

      echo '<span class="at-re-toggle"> 
      <input id="edit-'.$field['id'].'" class="buttom button-primary" type="" value="Edit '.$field['name'].'" accesskey="p" name="editk"></h3> 
      </span> 

      <span style="display: none;"> 

      <table class="repeate-box wp-list-table widefat fixed posts" >'; 
      if ($field['inline']){ 
      echo '<tr class="post-1 type-post status-publish format-standard hentry category-uncategorized alternate iedit author-self" VALIGN="top">'; 
      } 
     foreach ($field['fields'] as $f){ 
      //reset var $id for repeater 
      $id = ''; 
      $id = $field['id'].'['.$c.']['.$f['id'].']'; 
      $m = isset($me[$f['id']]) ? $me[$f['id']]: ''; 
      $m = ($m !== '') ? $m : $f['std']; 
      if ('image' != $f['type'] && $f['type'] != 'repeater') 
      $m = is_array($m) ? array_map('esc_attr', $m) : esc_attr($m); 
      //set new id for field in array format 
      $f['id'] = $id; 
      if (!$field['inline']){ 
      echo '<tr>'; 
      } 
      call_user_func (array(&$this, 'show_field_' . $f['type']), $f, $m); 
      if (!$field['inline']){ 
      echo '</tr>'; 
      } 
     } 
     if ($field['inline']){ 
      echo '</tr>'; 
     } 
     echo '</table></span> 
     <span class="at-re-toggle"><img src="'; 
      if ($this->_Local_images){ 
      echo $plugin_path.'/images/edit.png'; 
      }else{ 
      echo 'http://i.imgur.com/ka0E2.png'; 
      } 
      echo '" alt="Edit" title="Edit"/></span> 
     <img src="'; 
     if ($this->_Local_images){ 
      echo $plugin_path.'/images/remove.png'; 
     }else{ 
      echo 'http://i.imgur.com/g8Duj.png'; 
     } 
     echo '" alt="'.__('Remove','mmb').'" title="'.__('Remove','mmb').'"></div>'; 
     $c = $c + 1; 

     } 
     } 

    echo '<img src="'; 
    if ($this->_Local_images){ 
     echo $plugin_path.'/images/add.png'; 
    }else{ 
     echo 'http://i.imgur.com/w5Tuc.png'; 
    } 
    echo '" alt="'.__('Add','mmb').'" title="'.__('Add','mmb').'" ><br/><input id="add-'.$field['id'].'" class="buttom button-primary" type="submitk" value="Add '.$field['name'].'" accesskey="q" name="addk"></div>'; 

    //create all fields once more for js function and catch with object buffer 
    ob_start(); 


    echo '<div class="at-repater-block">'; 


    echo '<table class="wp-list-table repeater-table">'; 


    if ($field['inline']){ 
     echo '<tr class="post-1 type-post status-publish format-standard hentry category-uncategorized alternate iedit author-self" VALIGN="top">'; 
    } 

    foreach ($field['fields'] as $f){ 
     //reset var $id for repeater 
     $id = ''; 
     $id = $field['id'].'[CurrentCounter]['.$f['id'].']'; 
     $f['id'] = $id; 

     if (!$field['inline']){ 
     echo '<tr>'; 
     } 

     if ($f['type'] != 'wysiwyg') 
     call_user_func (array(&$this, 'show_field_' . $f['type']), $f, ''); 
     else 
     call_user_func (array(&$this, 'show_field_' . $f['type']), $f, '',true); 
     if (!$field['inline']){ 
     echo '</tr>'; 
     } 
    } 
    $js_code2 ='<span class=\"at-re-remove\"><input id="remove-'.$c.$field['id'].'" class="buttom button-primary remove-'.$c.$field['id'].'" type="submi7" value="Removevv " accesskey="7" name="remove7"></span>'; 
    if ($field['inline']){ 
     echo '</tr>'; 
    } 



    $js_code2 = str_replace("\n","",$js_code2); 
    $js_code2 = str_replace("\r","",$js_code2); 
    $js_code2 = str_replace("'","\"",$js_code2); 
    echo $js_code2; 
    echo '</table><img src="'; 
    if ($this->_Local_images){ 
     echo $plugin_path.'/images/remove.png'; 
    }else{ 
     echo 'http://i.imgur.com/g8Duj.png'; 
    } 
    echo '" alt="'.__('Remove','mmb').'" title="'.__('Remove','mmb').'" ></div>'; 
    $counter = 'countadd_'.$field['id']; 
    $js_code = ob_get_clean(); 
    $js_code = str_replace("\n","",$js_code); 
    $js_code = str_replace("\r","",$js_code); 
    $js_code = str_replace("'","\"",$js_code); 
    $js_code = str_replace("CurrentCounter","' + ".$counter." + '",$js_code); 

    echo '<script> 
     jQuery(document).ready(function() { 
      var '.$counter.' = '.$c.'; 
      jQuery("#add-'.$field['id'].'").on(\'click\', function() { 
      '.$counter.' = '.$counter.' + 1; 
      jQuery(this).before(\''.$js_code.'\'); 
      // jQuery("#'.$field['id'].'").append(\''.$js_code2.'\'); 
      // alert(\''.$js_code2.'\'); 
      update_repeater_fields(); 
      }); 

      }); 
     </script>'; 
     echo '<script> 
     jQuery(document).ready(function() { 

       jQuery(".remove-'.$c.$field['id'].'").on(\'click\', function() { 
        var answer = confirm("Are you sure you want to delete this field ??")  
        if(!answer){ 
         event.preventDefault();  
        } 
        jQuery(".remove-'.$c.$field['id'].'").remove(); 
       }); 
      }); 
     </script>'; 
    echo '<br/><style> 
.at-inline{line-height: 1 !important;} 
.at-inline .at-field{border: 0px !important;} 
.at-inline .at-label{margin: 0 0 1px !important;} 
.at-inline .at-text{width: 70px;} 
.at-inline .at-textarea{width: 100px; height: 75px;} 
.at-repater-block{background-color: #FFFFFF;border: 1px solid;margin: 2px;} 
</style>'; 
    $this->show_field_end($field, $meta); 
    } 

Answer 1

ОК так, как вы уже сказали, живой осуждается.

Вот скрипка решения: http://jsfiddle.net/y8JFb/2/

В основном дают каждый новый DIV, который динамически создавать уникальный идентификатор на основе вашего счетчика, а затем дать атрибут данных для вашего удалить счетчик, который содержит этот идентификатор.

Тогда у вас есть обработчик щелчка:

$(document).on("click", ".at-re-remove", function(e) { 
    $("#"+$(e.target).data("remove")).remove(); 
    $(e.target).remove(); 
});