Question

HTML：

<form enctype="multipart/form-data" action="" method="POST" style="margin-top: 20px; ">
        <div class="row btts-form-group clearfix">
    <div style="width: 20%; float: left; margin-right: 1%;">
        Image : <input type="file" name="image[]">
    </div>  
    <div style="width: 27%; float: left; margin-right: 1%;">
        Title : <input type="text" name="title[]">
    </div>

    <div style="width: 22%; float: left; margin-right: 1%;">
        More Info : <input type="text" name="more_info[]">
    </div>

    <div style="width: 22%; float: left; margin-right: 1%;">
        Button : <input placeholder="Put the url.." type="text" name="button_link[]">
    </div>
    <div style="width: 5%; float: left; ">
        <input type="button" class="button button-primary add_more" value="+">
    </div>
</div>


        <input type="submit" class="button button-primary" value="Save Change" style="margin-top: 20px;">
    </form>

这是我的简单jquery代码，用于附加一行表单：

 $(document).ready(function(){

        $('body').on('click', '.add_more', function(e){


            $.ajax({
                url : absbBtToS.ajax_url,
                type : 'get',
                data : {
                    action : 'new_slider_html',
                    security : absbBtToS.check_nonce

                },
                success : function( response ) {

                    $('.btts-form-group:last').after(response);
                    //console.log(response);
                    //jQuery('.rml_contents').html(response);
                },
                error : function(error){
                   console.log(error);
                }
            });

          e.stopImmediatePropagation();

        });
     });

Ajax行动：

add_action( 'wp_ajax_new_slider_html',  'new_slider_html');

function new_slider_html(){
    include( plugin_dir_path( __FILE__ ) . 'admin/partials/absb_bt_to_s-admin-display.php');

        if( !check_ajax_referer( 'absbBtToS-nonce', 'security' ) ){
            wp_send_json_error('error!');
        }

      show_slider_form_input();
}

show_slider_form_input();定义如下，其内容在absb_bt_to_s-admin-display.php中：

function show_slider_form_input(){?>
<div class="row btts-form-group clearfix" >
    <div style="width: 20%; float: left; margin-right: 1%;">
        Image : <input type="file" name="image[]"  />
    </div>  
    <div style="width: 27%; float: left; margin-right: 1%;">
        Title : <input type="text" name="title[]" />
    </div>

    <div style="width: 22%; float: left; margin-right: 1%;">
        More Info : <input type="text" name="more_info[]" />
    </div>

    <div style="width: 22%; float: left; margin-right: 1%;">
        Button : <input placeholder="Put the url.." type="text" name="button_link[]" />
    </div>
    <div style="width: 5%; float: left; ">
        <input type="button" class="button button-primary add_more"  value="+" />
    </div>
</div>

<?php }

但是当我点击一次。两行添加。似乎$（＆＃39; .btts-form-group：last＆＃39;）。after（response）;执行两次。我还添加了e.stopImmediatePropagation();但没有运气。有什么想法吗？

Answer 1

你的代码工作正常没有任何问题，并确保你的ajax响应，在你的情况下你的ajax响应是问题

＆＃13;

$(document).ready(function(){
    $('body').on('click', '.add_more', function(e){
    var arr=['<div class="row btts-form-group clearfix" >','<div style="width: 20%; float: left; margin-right: 1%;">','Image : <input type="file" name="image[]"  />','</div>','<div style="width: 27%; float: left; margin-right: 1%;">','Title : <input type="text" name="title[]" />','</div>','<div style="width: 22%; float: left; margin-right: 1%;">','More Info : <input type="text" name="more_info[]" />','</div>','<div style="width: 22%; float: left; margin-right: 1%;">','Button : <input placeholder="Put the url.." type="text" name="button_link[]" />','</div>','<div style="width: 5%; float: left; ">','<input type="button" class="button button-primary add_more"  value="+" />','</div>','</div>'];
    var response=arr.join("");
     $('.btts-form-group:last').after(response);
      /*$.ajax({
        url : absbBtToS.ajax_url,
        type : 'get',
        data : {
          action : 'new_slider_html',
          security : absbBtToS.check_nonce
        },
        success : function( response ) {
          $('.btts-form-group:last').after(response);
          //console.log(response);
          //jQuery('.rml_contents').html(response);
        },
        error : function(error){
                   console.log(error);
        }
      });*/
          e.stopImmediatePropagation();

    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="" method="POST" style="margin-top: 20px; ">
  <div class="row btts-form-group clearfix">
<div style="width: 20%; float: left; margin-right: 1%;">
  Image : <input type="file" name="image[]">
</div>	
<div style="width: 27%; float: left; margin-right: 1%;">
  Title : <input type="text" name="title[]">
</div>

<div style="width: 22%; float: left; margin-right: 1%;">
  More Info : <input type="text" name="more_info[]">
</div>

<div style="width: 22%; float: left; margin-right: 1%;">
  Button : <input placeholder="Put the url.." type="text" name="button_link[]">
</div>
<div style="width: 5%; float: left; ">
  <input type="button" class="button button-primary add_more" value="+">
</div>
</div>   

  <input type="submit" class="button button-primary" value="Save Change" style="margin-top: 20px;">
</form>

＆＃13;

我希望它对你有所帮助

使用jQuery在最后一个元素后插入不起作用

1 个答案: