ckick event with only ID in the DOM

Question

ckick event with only ID in the DOM

Navigation

#1 by (1 votes)

1

Dear, I want to comment that I have a list of html elements generated by a loop (while) from PHP (all have the same ID and CLASS). The problem I have is that I want to assign a click event from jquery to those elements. Through the ID, it clearly does not work according to the technical specifications of JQUERY since the DOM the ID must be unique; using CLASS it works but calls the event to all the elements at the same time, even if you click only one (since all of them comapte the same class). So I am involved in this problem, if someone has a contribution to give me, I appreciate it from now on. step to leave the jquery code:

        document.querySelectorAll(".elemento")
          $("#comentar").click(function(){
          $(".elemento").show();
         });

Here is a summary of the code I use in the loop:

<?php while($ver=mysqli_fetch_row($result)){ ?>
<div id="hola" class="mundo"><?php echo ver[0];?></div>
 <?}>

Salu2 !!!!

jquery

asked by Santiago Gonzalez 28.10.2017 в 09:58

source

1 answer

doubt with Cursor type_warning How to fix It does not allow me to modify android: layout_height in a LinearLayout

score 1 · Accepted Answer

It is possible that your error is in wanting to enclose the listeners within document.querySelectorAll .

If, as you say, you want to assign an id to each element and listen to the clicks of that element, the best way would be to enclose all the code within $(function() { , it is the function that allows the whole DOM to be ready and then you can listen by id, by class, or by whatever you want.

Here are several examples:

$(function() {

    /*Selector por id y elemento*/
    $("#test1 p").on('click', function() {
      $(this).slideUp();
    });

    /*Selector por clase y elemento*/
    $(".test2 p").click(function() {
      $(this).css('color', 'red');
    });

    /*Selector por clase, cualquier elemento*/
    $(".test3").click(function() {
      $(this).fadeOut("slow");
    });

    /*Selector por id*/
    $("#test4").click(function() {
      $(this).css('color', 'blue');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
  <p>Me iré para arriba si haces clic en mi</p>
  <p>También me iré para arriba si haces clic en mi</p>

  <hr />

</div>
<div class="test2">
  <p>Me pondré rojo si haces clic en mi</p>
  <p>Me pondré también rojo si haces clic en mi</p>

  <hr />

</div>
<div class="test3">
  <p>Yo y mi botón nos quitaremos lentamente de tu vista si haces clic en mí</p>
  <button>Hazme invisible junto con el texto de arriba</button>
</div>

<hr />
<p id="test4">Soy único, seré un pitufo  si haces clic en mi</p>

PHP: Assign different ids

Modify your PHP like this.

It's all PHP code, without mixing with HTML code. The code is more readable like this.

<?php 

$strHTML="";
$i=1;
while($ver=mysqli_fetch_row($result)){  
    $strDivId="hola".$i; 
    $strHTML.='<div id="'.$strDivId.'" class="mundo">'.$ver[0].'</div>';
    $i++;
}
echo $strHTML;

?>

You will have every div that is created inside the loop with a different id:

<div id="hola1">...</div>
<div id="hola2">...</div>
<div id="hola3">...</div>
....