doubt with event .click () jquery

Navigation
1

Good morning, I am trying to learn about jquery and during my practice I have this problem:

I'm making a table every row has a button, that button opens a modal where the content of the row is shown to "edit". But when working with jquery, try to indicate the id of the button and not its class , but the modal only opened with the first row.

So I decided to indicate it with your class and it started to function normally.

So my question is:

  • Because when you indicate the class of my button the event works, but at indicate with the id of the button, no?
  • Why did it only work with one row?

This is my code indicating the button with your class: 

$(".btn-default").click(function(){
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>Jhonson</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
 </div>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

And this is my code indicating the button with your ID: 

$("#btn-agregar").click(function(){
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>Jhonson</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
 </div>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Thanks in advance.

    
asked by Raphael 01.08.2016 в 18:53
source

2 answers

3

The problem is not jQuery, the issue is that you can not (you should not) use an id more than once in a document, so you should have a different id for each button: 

        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><button class="btn btn-default" id="btn-agregar1">Agregar</button></td>
        </tr>
        <tr>
            <td>Amy</td>
            <td>Jhonson</td>
            <td><button class="btn btn-default" id="btn-agregar2">Agregar</button></td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Smith</td>
            <td><button class="btn btn-default" id="btn-agregar3">Agregar</button></td>
        </tr>

The html5 specification is explained in the following link (in English): link

Basically it says that the id of an element must be unique.

When you pass the selector that contains an ID to jQuery $('#id')... , you are saying that there is only one element in the whole DOM, therefore it will only work with the first ID that jQuery finds.

When you use a class, it does work, because it is not unique and can be applied to as many elements as you wish.

Here is a link (in English) that explains a little more about CSS selectors (although jQuery adds one or the other): link

    
answered by 01.08.2016 / 19:02
source
1

Because in html it is illegal to have more than one repeated id.

Jquery uses internally document.getElementById to select% by id . This is the code used. As a single element is manually assigned and the length is set to 1. 

elem = document.getElementById( match[2] );

// Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
if ( elem && elem.parentNode ) {
    // Inject the element directly into the jQuery object
    this.length = 1;
    this[0] = elem;
}

this.context = document;
this.selector = selector;
return this;

On the spec you can read

  

Returns the element whose ID is elementId . If there is no such element, return null . The behavior is not defined if more than one element has that ID.

It mostly depends on the implementation of the browser but in the documentation of document.querySelector explain

  

If the selector matches an ID and this ID is used erroneously many times in the document, it returns the first element found.

This is the natural behavior that you will find implemented in most browsers. 

$(function() {
  var botones = $('button');
  var ids = $('#miId');
  console.log('Botones seleccionados por id', ids.length);
  console.log('Botones seleccionados por tipo', botones.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="miId"></button>
<button id="miId"></button>
    
answered by 01.08.2016 в 19:33
Text for grid without data - Genexus Ev2 U7 How to call a method that is general with Activeform?