jQuery - Change action and form ID and use this

Question

Apparently in the DOM have changed the values, even changed the ID of the form with the idea that the script no longer has effect but when you click Publish, nothing happens. Searching I tried to use "prop" instead of "attr" but it still does not work. I think it's because of the "e.preventDefault ()". But I do not know how to disable it. This is my code. As you can see once the request is sent, the input and the "send" button are deactivated and when the values are received, they change the id of the form, the id and name of the button and it is renamed "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>

Here my 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>

Here a fiddle showing that happened (check 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>