javascript - jQuery - 更改操作和表单 ID 并使用它

Question

显然在 DOM 中更改了值，甚至更改了表单的 ID，认为脚本不再有效，但是当您单击“发布”时，没有任何反应。搜索我尝试使用“prop”而不是“attr”，但它仍然不起作用。我认为这是因为“e.preventDefault ()”。但我不知道如何禁用它。这是我的代码。如您所见，发送请求后，输入和“发送”按钮将被停用，当收到值时，它们会更改表单的 ID、按钮的 ID 和名称，并将其重命名为“Publish”。

<script>
    jQuery(function($){
        var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
        $('[id^="form-search"]').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type : 'POST',
                url  : 'http://localhost/ladoserver/getapi.php',
                data : $(this).serialize(),
                cache: false,
                beforeSend: function(){
                    $('input#keyword').prop('disabled', true);
                    $('button#search').prop('disabled', true);
                    $('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
                }
            }).done(function(data) {
                $('#results').html(data);
                $('input#keyword').prop('value', 'PUBLISH DATA');
                $('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
                $('span#help').hide();
                $('[id^="form-search"]').prop('action','publish.php');
                $('[id^="form-search"]').prop('id', 'form-publish'); 
                var countResults = $('input#total_data').val();
                for (var i = 1; i <= countResults; i++) {
                    $('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
                }
                $('#lista').remove();
            });
        });
    });
</script>

这是我的html

        <form action="" method="post" class="form-search" id="form-search">
            <fieldset>
                <!-- Form Name -->
                <legend>Name</legend>
                <div class="form-group">  
                  <input id="keyword" name="keyword" required="" type="text">  
                  <button id="search" name="search" class="btn btn-success boton">Search</button>
                  <span class="help-block" id="help">Help</span>
                    <div id="lista" style="display:none">Test</div>
                </div>
            </fieldset>
            <div id="result"></div>
        </form>

这里有一个 fiddle 显示发生了什么(检查 DOM)。 JSFiddle.net

Answer 1

            //var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
            // when the action is plugin url.
            
            $(document).on('submit','[id^="form-search"]', function(e) {
                e.preventDefault();
                $.ajax({
                    type : 'POST',
                    url  : 'http://localhost/ladoserver/getapi.php',
                    data : $(this).serialize(),
                    cache: false,
                    beforeSend: function(){
                        $('input#keyword').prop('disabled', true);
                        $('button#search').prop('disabled', true);
                        $('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
                    }
                }).done(function(data) {
                    $('#results').html(data);
                    $('input#keyword').prop('value', 'PUBLISH DATA');
                    $('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
                    $('span#help').hide();
                    $('[id^="form-search"]').prop('action','publish.php');
                    $('[id^="form-search"]').prop('id', 'form-publish'); 
                    var countResults = $('input#total_data').val();
                    for (var i = 1; i <= countResults; i++) {
                        $('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
                    }
                    $('#lista').remove();
                });
            });

    // when the action point to publish.php    === This is what you need

      $(document).on('submit','[id^="form-publish"]', function(e) {
                e.preventDefault();
                var url = $(this).attr('action');
                $.ajax({
                    type : 'POST',
                    url  : url,
                    data : $(this).serialize(),
                    cache: false,
                    beforeSend: function(){
                        // do your pre-processing
                    }
                }).done(function(data) {
                    // do your post processing.
                });
            });        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <form action="" method="post" class="form-search" id="form-search">
                <fieldset>
                    <!-- Form Name -->
                    <legend>Name</legend>
                    <div class="form-group">  
                      <input id="keyword" name="keyword" required="" type="text">  
                      <input type ="submit" id="search" name="search" class="btn btn-success boton">Search</button> 
    <!-- change the button type to submit type -->
                      <span class="help-block" id="help">Help</span>
                        <div id="lista" style="display:none">Test</div>
                    </div>
                </fieldset>
                <div id="result"></div>
            </form>