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

时间:2013-05-02 03:58:10

标签: javascript jquery forms dynamic-forms

我有一个表单,我可以动态添加输入字段(组)。

这是一个非常复杂的形式,在这里可以看到一个PART:FIDDLE

我在领事上遇到的实际错误是:

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

如果表单中已有字段(例如前两个字段),EDITREMOVE按钮就可以正常工作。

我的问题是REMOVE按钮(样式输入字段)不适用于动态ADDED字段(实际上由JS“附加”并从PHP填充)

注意代码:我知道代码很乱:-(。它是继承的,很快就会被清理。

它是从HTML输出中复制并粘贴的。

ADD REMOVE EDIT 实际上就像按钮一样(太长而与粘贴无关)

实际的源代码是PHP,它跨越多个文件(JS也是如此),因此在这里显示起来有点太复杂了。

更新:根据热门请求的代码: - )

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

1 个答案:

答案 0 :(得分:1)

好的,因为你已经被告知,现场已被弃用。

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

基本上为每个新div提供动态创建基于计数器的唯一ID,然后将data属性提供给包含该ID的删除计数器。

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

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