about ajax vs assigned events

Asked

Viewed 63 times

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 this ajax request, I have functions that handle events in this table, such as hover in the row, click the button that is in the generated table, and so on.. ), but the functions related to the table are not working, the code is OK, no syntax errors.

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

Code of the ajax request:

$(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>

Right after that, 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 that, $(".modificar"), is a class of a button that will be generated dynamically by the ajax request I made up there..

jquery ajax
  • 1

    It looks like a typical case where you need to delegate events. You can add the code you refer to?

  • 1

    http://answall.com/q/36811/129

  • @Sergio, I edited and put the scripts, but look, if this is the problem, I can then replace with $(".modificar").on(hover,function(){},function{});?

  • application of the method on() then it is to place events on objects that can, or not, were created dynamically?

  • 1

    @Alexandrec.Caus Não, depends on how the .on() is used

  • 1

    That should be done with CSS... you don’t want to go that way?

  • I really should, but I did it this way to escape the conventional! @bfavaretto, correct me if I’m wrong and need to read more.. But, the on() selector must exist, whereas the second parameter is the one that was generated dynamically, isn’t it? Type: $(deveexistir).on(evento,vaisergeradodinamicamente,function(){...});

  • 1

    @Alexandrec.Caus Exactly.

Show 3 more comments

1 answer

3


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 the .hover() does not allow this I suggest using the .on() thus:

$(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");
    });

});

More Reading About Delegation: /a/5199/129

  • Thanks for the endorsement, it was exactly that, as it was generated dynamically, I delegated using on() and it was perfect. I thank you both for sharing the knowledge! :)

  • @Alexandrec.Caus good that I could help! Take a look at the question Linkei in the answer. Have two good explanations about delegation.

Browser other questions tagged jquery ajax

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