JS - jQuery动态添加删除输入字段

Question

我有一个窗体，我动态添加输入字段（组）。

这是一个相当复杂的形式，以及一部分可在这里看到：FIDDLE

实际的错误，我得到的领事是：

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

当我已经在表单字段（例如前两个）EDIT和REMOVE按钮将工作得很好。

我的问题是，REMOVE按钮（样式输入字段）不工作的动态ADDED场（实际上是“附加”的JS和PHP填充）的代码

注：我知道代码是一个烂摊子:-(。它继承并即将清理。

它被复制，并从HTML输出粘贴。

的地址，REMOVE和编辑实际上风格像按钮（过长和不相关贴）

的实际来源是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

OK所以你已经被告知，现场已被弃用。

下面是该解决方案的小提琴：http://jsfiddle.net/y8JFb/2/

基本上给每个新的div你动态地创建基于您的柜台一个唯一的ID，然后给数据属性包含该ID您删除计数器。

然后你有你的点击处理程序：

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