Question

想要通过在某一行的 td 中添加事件监听器来调用一个 javascript 函数

2021-04-08

373

javascript laravel html-table

我已完成以下操作。

<td class="text-center"><a href="#" title="" id="signal_<?=$rs['signal_id']?>"  addEventListener('click','editSignal(this)') data-toggle="modal" data-target="#send_distress_modal"><i class="fa fa-edit"></i></a></td>
            <td class="text-center"><a href="#" title="" id="signal_<?=$rs['signal_id']?>" onclick="deleteSignal(this);"><i class="fa fa-trash"></i></a></td>

我已使用 onclick 完成此操作，但想使用 addeventlistener('click,'anyFunction') 执行相同操作。因为当我使用 onclick 时，它会出现以下错误；

VM7707 log:330 Uncaught ReferenceError: editSignal is not defined
at HTMLAnchorElement.onclick (VM7707 log:330)

以下这些函数都存在一些问题，单击时都会出现错误。无法弄清楚问题是什么。

<script type="text/javascript">
function editSignal(obj) {
    // alert(obj.id);
    var obj_id = obj.id;
    var id = obj_id.split("_");
    console.log(id);
    let _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: 'send_distress_signal',
        type: 'POST',
        dataType: 'json',
        data: {edit_signal_id: id[1],
        //  _token: _token
         }},
    })
    .done(function(result) {
        console.log(result);
        $('#description').val(result['description']);
        $('#resType').val(result['resource_type']);
        $('#res').val(result['resource']);
        $('#resource_hidden').val(result['resource']);
        $('#location').val(result['location']);
        $('#edit_flag_signal').val(result['signal_id']);
        populateResource();
    })
    .fail(function() {
        alert("error");
    });

}

function deleteSignal(obj) {
    // alert(obj.id);
    var obj_id = obj.id;
    var id = obj_id.split("_");

    $.ajax({
        url: 'includes/sendDistress_action.php',
        type: 'POST',
        data: {del_signal_id: id[1]},
    })
    .done(function(result) {
        if(result=="Success"){
            location.reload();
        }else{
            alert("Some error occured");
        }
    })
    .fail(function() {
        alert("error");
    });
}

$('#distress_btn').on('click', function(event) {
    event.preventDefault();
    /* Act on the event */
    $('#description').val('');
    $('#resType').val('');
    $('#res').val('');
    $('#resource_hidden').val('');
    $('#location').val('');
    $('#edit_flag_signal').val('0');
});

谢谢。

Answer 1

这些只是示例的测试代码。重点关注 <script> 部分。如果您想使用 addEventListener，则必须在事件目标的脚本部分中使用它，这在文档中已明确说明。

<html>
  <head>
    <style>
      table {
        width: 100%;
        border: 1px solid black;
      }
      td {
        width: auto;
        height: auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <script type="text/javascript">
    var td1ClickCount = 0;
    function customClickFunction() {
      clickCount += 1;
      console.log("clickCount : " + clickCount);
    }
    function editSignal(element) {
      console.log("editSignal From id : " + element.id);
    }
    function deleteSignal(element) {
      console.log("deleteSignal From id : " + element.id);
    }
  </script>
  <body>
    <table>
      <tr>
        <td id="td1" class="text-center">
          <a href="#" title="" id="signal_1" onclick="editSignal(this);">
            <i class="fa fa-edit">signal_1</i>
          </a>
        </td>
        <td id="td2" class="text-center">
          <a href="#" title="" id="signal_2" onclick="deleteSignal(this);">
            <i class="fa fa-trash">signal_2</i>
          </a>
        </td>
      </tr>
    </table>
  </body>
  <script type="text/javascript">
    //EventTarget.addEventListener(type, listener, ...);
    document.getElementById("td1").addEventListener('click', function(event){
      td1ClickCount += 1;
      console.log(event.target + " click count: " + td1ClickCount);
    });
  </script>
</html>

Answer 2

请避免在 HTML 元素中添加“addEventListener”，而是在同一个 HTML 或外部 js 文件中的标签中使用。我注意到 HTML 和 javascript 代码中存在一些问题，因此我建议您在 HTML 和 Javascript 代码中进行以下更改。我相信它会正常工作。

不要使用 id="signal_..."，而要使用 row-id="signal_..."，这样编辑和删除元素就不会具有相同的 ID。相同的 Id 不遵循 HTML 标准规则。
从 HTML 元素中删除“addEventListener”，并在 javascript 部分中使用替代方法。
添加类属性并使用此类属性注册事件侦听器，这也遵循 HTML 标准规则。

<td class="text-center"><a href="#" class="editSignal" title="" row-id="signal_<?=$rs['signal_id']?>"  data-toggle="modal" data-target="#send_distress_modal"><i class="fa fa-edit"></i></a></td>
<td class="text-center"><a href="#" title="" class="deleteSignal" row-id="signal_<?=$rs['signal_id']?>" ><i class="fa fa-trash"></i></a></td>

然后在脚本部分使用以下 javascript 函数。

$(document).on('click','.editSignal',function(){
    var obj_id = $(this).attr('row-id');
    //alert(obj_id);
    var id = obj_id.split("_");
    console.log(id);
    //return;
    let _token   = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: 'send_distress_signal',
        type: 'POST',
        dataType: 'json',
        data: {edit_signal_id: id[1]},
        //  _token: _token
    }).done(function(result) {
        console.log(result);
        $('#description').val(result['description']);
        $('#resType').val(result['resource_type']);
        $('#res').val(result['resource']);
        $('#resource_hidden').val(result['resource']);
        $('#location').val(result['location']);
        $('#edit_flag_signal').val(result['signal_id']);
        populateResource();
    }).fail(function() {
        alert("error");
    });
});

$(document).on('click','.deleteSignal',function(){
    var obj_id = $(this).attr('row-id');
    var id = obj_id.split("_");
    console.log(id);
    //return;
    $.ajax({
        url: 'includes/sendDistress_action.php',
        type: 'POST',
        data: {del_signal_id: id[1]},
    })
    .done(function(result) {
        if(result=="Success"){
            location.reload();
        }else{
            alert("Some error occured");
        }
    })
    .fail(function() {
        alert("error");
    });
});

希望它现在能正常工作。如果仍然不起作用，请将 HTML 和 Javascript 代码发送给我以供审核，我会相应地为您提供解决方案。