onclick() in elements generated through ajax?

Asked

Viewed 2,304 times

2

I’m trying to use an event onclick in <li> generated through a form ajax(). I have the following code

$(".option").click(function(){
  alert();
  var text = $(this).attr("href");
  window.location.href=href;
});

In this code, he neither alert() gives, the <li> has that class and yet it gives no sign.

Would give code information ajax but it’s against my client’s policy to disclose information so it’s this example of html that he writes.

echo "<li class='option' href='index.php?pg=13&id=1'><small><b>[Texto]</b></small> Nome</li>";
jquery ajax
  • 1

    just do it like this $(document).on('click', '.option', function(){})

  • A simple question, if this element contains a link and you are using redirect based on this link when clicked, Poruqe does not make your life easier and uses a <a href='index.php?pg=13&id=1'><small><b>[Texto]</b></small> Nome</a> ?

  • Because all the <li> are defined as such ul > li{ and if you put a <a> before the <li> classes will not be applied. I know I could change but would like to know other alternatives.

  • In fact, there are no problems in your code, the problem is only where it is running and when it is running, because at the moment, you are running this click event assignment before the element even exists on the page, so there is no way to work, then you just need to put this your code inside the method .done() from your ajax, after the element has been played on the page, so it will run only when the element already actually exists.

2 answers

5


What you can is assign to document an event click in its class, since the elements are being generated after the DOM has already been loaded, so it will not take the event of the click, do as follows:

$(document).on('click', '.option', function(){
  //Evento do click
})

That way you say whenever you’re clicked on document in that classe he performs this method!

Another way is to use jQuery delegate(), so you say that in every element(div) in the class (option1) it will perform this method

$('div').delegate('.option1','click', function() {
    //Evento do click
});

I added 3 examples separated by a line, check that in the first example every click it generates an element, but the generated element has no action, already in the second and third examples the generated elements have the desired action:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="conteudo1">
    <div class="option1" data-option="1">Click1</div>
</div>
<hr>
<div class="conteudo2">
    <div class="option2" data-option="1">Click1</div>
</div>
<hr>
<div class="conteudo3">
    <div class="option3" data-option="1">Click1</div>
</div>
<script>
    $('.option1').on('click', function () {
        var option = $(this).data('option');
        $('.conteudo1').append("<div class='option1' data-option='"+(option+1)+"'>Click"+(option+1)+"</div>");
    });


    $(document).on('click','.option2', function () {
        var option = $(this).data('option');
        $('.conteudo2').append("<div class='option2' data-option='"+(option+1)+"'>Click"+(option+1)+"</div>");
    });


   

   $('div').delegate('.option3', 'click', function(){
        var option = $(this).data('option');
        $('.conteudo3').append("<div class='option3' data-option='"+(option+1)+"'>Click"+(option+1)+"</div>");
   })
 </script>

  • seems to be functional, but it does not seem to me to be a good thing to assign an event to the whole document performing class checks every user click on the page... I believe it is best to just put the assignment as the guy did only that after the element was created same.

  • It worked perfectly! There was no need for examples but thanks for the effort made :)

  • 1

    @Pauloroberto Your question reminded me that we can use the delegate to not need to assign the click to the document, I added another example in the reply

1

For elements like this generated from the javascript you will need to use the .on()

$(".option").on("click", function(){
  alert();
  var text = $(this).attr("href");
  window.location.href=href;
});

  • I removed my reply to leave as comment here, make the click bind inside your ajax return Success block.

  • @Leandroangelo I think your comment should be in the post and not in the answer of our friend

  • @Rafaelaugusto, as the colleague had posted the code before, the rest of my reply would be only a complement, that it can be incorporated the same answer if the author wishes.

  • because the $('.option').click(function(){}); wouldn’t it work if it were placed inside the successful ajax return block? I see no reason to change to the on

  • the error occurs if the object is generated after the page loaded, if Voce creates a new element it must redeclare the syntax of onclick after its creation so that it is adhered to it

Browser other questions tagged jquery ajax

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