load disables jquery functions

Asked

Viewed 111 times

0

am giving a load() on my div, but it always disables jquery commands as soon as it load! Any solution???

   $(document).ready(function () {  

$('#form_campo').on('submit', function() {

    $.ajax({
        url: 'matriz/salvacad.php',
        type: 'post',
        data: $('#form_campo').serialize(),
        success: function(data) {
        $('.erase').click();

$(".menu").load(location.href + " .menu > *");

        }

    });

    return false;
    });

jquery function in another file is

    $('.cat').click(function (e) {
    e.preventDefault();
       $('.categoria').fadeToggle("fast");
       $('.menu').fadeOut('slow');
});
    $(".close_red").click(function(e){
    e.preventDefault();
     $(".categoria").fadeOut('fast');


                          });

but only works before Reload, or giving a refresh on the page

<div class="menu" id="menu">
            <div class="menux cat">Categoria</div><br>
            <div class="separated"></div>
            <?php
               mysql_set_charset('utf8');

$mostra = mysql_query("SELECT * FROM categoria" )or die (mysql_error());
$ver = mysql_fetch_array($mostra);


$status = $ver["categoria"];

if (empty($status)){

 echo('');

}
    else{

    echo('<div class="menux camp" style="margin-top: 10px; ">Campos do Produto</div><br>
    <div class="separated"></div>   ');

    }       
            ?>

            <div class="menux prod" style="margin-top: 10px; ">Produtos</div><br>
        </div>
php javascript jquery

  • You want to load a url (http://localhost.menu. > *) into the menu class?

  • @Ricardopunctual the result does not come from $_POST, it is only the result that appears in an sql query, I will edit for you to see

  • @adventistaam even that, comes from a localhost,

  • Tried to use an append?

  • the help of @Ricardopunctual worked, however my form disabled the Submit after load tbm

2 answers

0


Good using the @Ricardo Portugal tip, we changed the query after it returns and left so!

    $('.menu').on('click','.cat', function (e) {
    e.preventDefault();
       $('.categoria').fadeToggle("fast");
       $('.menu').fadeOut('slow');
});

We use the command. on() that it activates the changes and the use of the query, qto to the form, it gave redundancy with another form inside it, so I removed!

So far resolved!!

0

possible Solution a:

Add the code to callback of load

$(".menu").load(location.href + " .menu > *", function(){

    $('.cat').click(function (e) {
        e.preventDefault();
        $('.categoria').fadeToggle("fast");
        $('.menu').fadeOut('slow');
    });

    $(".close_red").click(function(e){
        e.preventDefault();
        $(".categoria").fadeOut('fast');
    );
});

Possible two solution:

Using the jQuery(document.body) even with the load of a new part, it will always read the whole document

jQuery(document.body).on('click', '.cat', function (e) {
    e.preventDefault();
    $('.categoria').fadeToggle("fast");
    $('.menu').fadeOut('slow');
});


jQuery(document.body).on('click', '.close_red', function (e) {
    e.preventDefault();
    $(".categoria").fadeOut('fast');
});

I say "possible" because there was once a case where one didn’t work, but the other did

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.