load disables jquery functions [duplicate]

Question

load disables jquery functions [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm giving a load () on my div, but it always disables jquery commands as soon as it loads! 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;
    });

The 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

asked by anonymous 04.06.2018 / 20:52

2 answers

0

Possible solution one:

Add the code in 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 solution two:

Using jQuery(document.body) even with load of a new part, it will always read the entire 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 has already been a case that one did not work, but the other one did

05.06.2018 / 15:50

Error in Manifest file How to leave the Header and Footer responsive with Boostrap 4.1.1?

score 0 · Accepted Answer

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

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

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

So far solved !!