Event click Jquery in selector . class

Asked

Viewed 1,901 times

5

I created several div by using jQuery to assign them the CSS class numero:

for(...)
textoHTML += "<div class='numero par'>"+sorteado+"</div> <!-- numero par-->\n";
...
textoHTML += "<div class='numero impar'>"+sorteado+"</div> <!-- numero ímpar-->\n";
$( "#quadro" ).html(textoHTML);

I want to be able to click this div and recover the drawn number.
But I still don’t know how to do it, it’s with the innerHtml? this?

However, it seems that the mouse click event is not working:

$( "numero" ).click(function() {
   console.log("Clicou no número");
});

With the above code nothing happens. It may have something to do with the fact that the CSS class numero of div created is not originally on DOM?

jquery css dom

2 answers

9


Your intuition was correct, it’s using the this and the innerHTML.

What is missing:

  1. You need a point in the jQuery selector for classes

        '.numero'
     ↑
(ponto aqui)

  2. Dynamically created elements need to be delegates in case you are tying the .click() before the cycle for have run.

    If you’re not tying up the .click() before the cycle for have run, can use the click as in the question, adding the point to the CSS class. 

    $('#quadro').on('click', '.numero', function () {

  3. You can use the this within the function click

  4. Can use this.innerHTML within the function.

    Here is going to be missing one parseInt() to convert the string a number in case you want to use that value as a number. If it’s just for display and you don’t need to do number calculations then you can use only var numero = this.innerHTML; or even innerText, instead of innerHTML.

Example can be seen here:

var textoHTML = '';
for (var sorteado = 0; sorteado < 30; sorteado = sorteado + 2) {
  textoHTML += "<div class='numero par'>" + sorteado + "</div> <!-- numero par-->\n";
  textoHTML += "<div class='numero impar'>" + (sorteado + 1) + "</div> <!-- numero ímpar-->\n";
}
$("#quadro").html(textoHTML);

$('#quadro').on('click', '.numero', function () {
  var numero = parseInt(this.innerHTML);
  alert(numero);
});

  • Thanks for the refactor à la @Zuul (TM)

  • Sergio sometimes working with ". on" in this way: "$("#div"). on('click',Function(){ " didn’t work for me and only using " $(Document). on("click","#div",Function(){ " worked. Do you know why that is? You think it’s worth asking a question about?

  • @Joaopaulo, take a look at this answer: http://answall.com/a/5199/129

  • When you use the ID it only takes the first element "Selects a single element with the Given id attribute". When you add the event to the Document and use the internal ID selector it manages to map all the elements, but "weighs" keep adding so many events in the Document.

4

If you have problems related to elements that were not originally in the DOM, you can use the method .on() jQuery. Example:

$( ".numero" ).on( "click", function() {
    //codigo
});

Until a while ago the . live() method was used for this, but this is already obsolete.

Browser other questions tagged jquery css dom

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