on ajax vs attributed events

Question

on ajax vs attributed events

Navigation

#1 by (3 votes)

1

When the document is ready, $(document).ready , I send an AJAX request to a PHP page that generates a table that I put in my body, but, ... below that ajax request, I have functions that handle events of this table, as hover in line, click the button that is in the generated table, and so on ..), but the functions these related to the table are not working, the code is OK, without syntax errors. >

I want to know if, because the table dynamically generates, when I associate events to it, it may be that events are not assigned because it has not yet been generated or something like this?

Ajax request code:

$(document).ready(function(){
$(function attform() {
$(".table").find("tbody").empty();
$.ajax({
url:"action/action.php",
method:"POST",
data:{acao:"attform"},
success: function(data){
$("tbody").append(data);
}
}); // fim ajax
}); // fim attform()
});

        </script>

Soon after it, I have a js.js document that basically has functions like this:

$(document).ready(function () {
$(".modificar").hover(

function () {
    these = $(this);
    $(these).parent().css("background-color", "blue");
},

function () {
    $(these).parent().css("background-color", "white");
});
});

See, $(".modificar") , is a class of a button that will be dynamically generated by the ajax request I made up there ..

jquery ajax

asked by anonymous 18.01.2015 / 01:11

1 answer

How to detect if wi-fi and / or bluetooth are connected mysql: unknown variable 'key_buffer = 16M'

score 3 · Accepted Answer

This should be done with CSS and not with JS ...

If you want to do with JS / jQuery in this case you have to use delegation and because .hover() does not allow this I suggest you use .on() like this:

$(document).ready(function () {

    $(document).on('mouseenter', '.modificar', function(){
        $(this).parent().css("background-color", "blue");
    });

    $(document).on('mouseleave', '.modificar', function(){
        $(this).parent().css("background-color", "white");
    });

});