Ajax Request is working on first element BUT not working on other requests?

Question

I'm implementing delete functionality via AJAX but when i hit delete icon from the table, first element deletion request works fine and at first click it deletes the record, but it doesn't send deletion request for the 2nd or 3rd elements.

JS Ajax Request:

// Delete symptom which is linked with a Remedy ( Causes page )
    $("#linked-symptom").click(function(e) {
        e.preventDefault();

        var symptom_id = $("#linked-symptom").attr('data-id');
        var dataString = '&id='+symptom_id;

        $.ajax({
            type: 'POST',
            data: dataString,
            url: '<?php echo $this->CxHelper->Route('eb-admin-delete-linked-symptom') ?>',
            success: function(data) {
                $("#successMessage").show().delay(5000).fadeOut();
            }
        });
    });

HTML Markup:

<table id="cx-records-table" class="table display table-striped table-bordered" width="100%">
            <thead>
                <tr>
                    <th>
                        Title
                    </th>
                    <th>
                        Delete
                    </th>
                </tr>
                <?php foreach($symptoms as $key => $symptom){ ?>
                    <tr>
                        <td class="all"><?php echo $symptom['title']; ?><br></td>
                        <td><a class="cx-action row-delete" href="javascript:void(0)" data-id="{{symptom['id']}}" id="linked-symptom"><i class="fa fa-trash-o"></i></a></td>
                    </tr>
                <?php } ?>

            </thead>
            <tbody></tbody>
        </table>

Function:

public function deldeleteLinkedSymptomAction(){

        // Get the Evaluation Symptom Id (if any)
        $symptomId = $this->request->get('id', null);

        $symptom = CxEbEvaluationSymptomCause::getLinkedSymptomEntryForDeletion($symptomId);
        if( $symptom ){
            $symptom->delete();
            return true;
        }else{
            return false;
        }

    }

Try to put an `alert` or a `console.log` into `$("#linked-symptom").click(function(e)` and see at the second click if is doing the alert or console.log, tell me the result maybe is the click event — David Leonardo Molina Ruiz Dav, Sep 12 '18 at 21:26
@rory-mccrossan that's not a very useful dupe. Yes, ID should be unique, but that does't explain to OP why it would cause problems with jQuery. — miken32, Sep 12 '18 at 21:31

score 0 · Accepted Answer · answered Sep 12 '18 at 21:28

HTML ID should be unique across the page, but you have multiple instances that you then try to use for a jQuery action. It will only affect the first one it finds. Try using this instead:

// Delete symptom which is linked with a Remedy ( Causes page )
$("a.row-delete").click(function(e) {
    e.preventDefault();

    var symptom_id = $(this).data("id");
    var dataString = '&id='+symptom_id;
    ...
});

Ajax Request is working on first element BUT not working on other requests?

1 Answers1