Jquery return the same id,but i don't use the same id on two elements

Question

I have a table and for this table i have an icon "plus" and for each row i have an icon "edit".

When i press "plus" it will create another tr with a select in it and an icon "edit".

This "edit" has an id that is equal with the number of the row,so the first "edit" icon will have id=1,the second id=2 and so on(i'm using an i++ for this).

My problem is that,when i press on "edit" icon i want to display in console the id of the icon(testing porpouse),but this will only work on the first icon.

I saw in another question that this will happen if you have the same id on more elements,but i don't.The code is this:

The main table,with just one row:

<table id="dynamic">
            <tr id="row1">
                <td>
                    <select class="form-control select-table" name="products[]" id="select-1" data-dep="">
                        <?php foreach($products as $product):?>
                            <option value="<?php echo $product['products_id'];?>"><?php echo $product['product_name'];?></option>
                        <?php endforeach;?>
                    </select>
                    <i id="1" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i>
                    <div id="plus-div"><span><i class="fas fa-plus fa-lg"></i></span></div>
                </td>
            </tr>
        </table>

The jquery code where i add a new row:

var i = 1;
    $('#plus-div').click(function(){
        i++;
        j++;
        $('#dynamic').append('<tr id="row'+i+'"><td><select  id="select-'+i+'" class="form-control select-table" name="products[]">' +
            <?php foreach ($products as $product):?>'<option value="<?php echo $product['products_id'];?>"><?php echo $product['product_name'];?></option>' +
            <?php endforeach; ?>
            '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i></td></tr>');
    });

The jquery code where i display the id:

$('.edit-div').click(function(){
        console.log((this).id);
    });

You need to use a delegated event handler as you're appending the `.edit-div` element dynamically. However you should note that using incremental `id` attributes is an anti-pattern. Using common classes along with DOM traversal is a *far* better method. I'd also suggest you `clone()` the existing row rather than dumping a lot of HTML in your JS logic. — Rory McCrossan, Apr 11 '18 at 09:25
I didn't knew about clone().The question is...can i still add a different id for every row if i use clone()? — Mitca Vicentiu, Apr 11 '18 at 09:30
Yes, but my point is that you shouldn't be adding `id` attributes at all. — Rory McCrossan, Apr 11 '18 at 09:31
I understand I'm using incremental id beacuse i need to pass that id to another element.I know that i'm doing it too complicated,but in this moment i really need to solve the bigger problem. — Mitca Vicentiu, Apr 11 '18 at 09:34
@rhumborl `$('document').on('click','.edit-div',(function(){ console.log((this).attr('id')); });` whats wrong here?can someone figure out my mistake — PHP dev, Apr 11 '18 at 09:37
@PHPdev Remove the mis-matched `(` before `function` Also `(this).attr('id')` will cause an error. You mean either `this.id` or `$(this).attr('id')` — Rory McCrossan, Apr 11 '18 at 09:41

score 1 · Accepted Answer · answered Apr 11 '18 at 09:26

This is because you are setting up the click event handler on page load when elements with id 2+ do not exist. In other words, you are using the equivalent of

$('#dynamic').on('click', function(){
    console.log((this).id);
});

You need to use the "live" overload where you attach the handler to a parent element (dynamic looks a good option) but restrict to it the .edit-div elements:

$('#dynamic').on('click', '.edit-div', function(){
    console.log((this).id);
});

See the jQuery docs for more explanation.

I see...Thank you :) I will accept the answear as soon as i can. — Mitca Vicentiu, Apr 11 '18 at 09:29

score 0 · Answer 2 · answered Apr 11 '18 at 09:27

Here is a Code. Which works fine.

JS

var i = 1;
    $('#plus-div').click(function(){
        i++;
        $('#dynamic').append('<tr id="row'+i+'"><td><select  id="select-'+i+'" class="form-control select-table" name="products[]">' +
            '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="edit-div">edit</i></td></tr>');
    });

    $(document).on("click",'.edit-div',function(){
        alert(this.id);
    });

PHP

<table id="dynamic">
            <tr id="row1">
                <td>
                    <select class="form-control select-table" name="products[]" id="select-1" data-dep="">

                    </select>
                    <i id="1" data-toggle="modal" data-target="#editModal" class="edit-div">Edit</i>
                    <div id="plus-div"><span>plus</span></div>
                </td>
            </tr>
        </table>

I have removed PHP as its a fiddle

score 0 · Answer 3 · answered Apr 11 '18 at 09:28

Use bind and unbind event in order to set click events on all element

var i = 1;
$('#plus-div').click(function () {
    $('.edit-div').unbind("click", editClickHandler);
    i++;
    j++;
    $('#dynamic').append('<tr id="row' + i + '"><td><select  id="select-' + i + '" class="form-control select-table" name="products[]">' +
        <?php foreach ($products as $product):?>
        '<option value="<?php echo $product['
        products_id '];?>"><?php echo $product['
        product_name '];?></option>' +
        <?php endforeach; ?>
        '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i></td></tr>');
    $('.edit-div').bind("click", editClickHandler);
});

$('.edit-div').bind("click", editClickHandler);

function editClickHandler(e) {
    console.log((this).id);
}

Jquery return the same id,but i don't use the same id on two elements

3 Answers3

JS

PHP