按钮点击

Question

我有由js

呈现的表格

<table class="table">
<thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Город</th>
        <th scope="col">Регион</th>

    </tr>
</thead>
<tbody id="cities" style="overflow: auto;"></tbody>

这是代码

function GetCity() {
let citiesurl = '/cities/index';
$.ajax({
    url: citiesurl,
    contentType: 'application/json; charset=utf-8',
    type: 'GET',
    dataType: 'json',
    processData: false,
    success: function (data) {
        $("#cities").empty();
        var list = data;
        for (var i = 0; i <= list.length - 1; i++) {
            var tableData = '<tr>' + '<td>' +
                (i + 1) +
                '</td>' +
                '<td class="cityId" style="display:none">' +
                list[i].Id +
                '</td>' +
                '<td > ' +
                list[i].Name +
                '</td>' +
                '<td > ' +
                list[i].RegionName +
                '</td>' +
                    '<td> ' +
                    '<button type="button" class="btn btn-info" onclick="DeleteCity()">' + 'Удалить' + '</button>' +
                    '</td>' +
                '</tr>';
            $('#cities').append(tableData);
        }
    }
})

}

我尝试通过按钮点击获取cityId的值。

这是代码

 let id = $(this).closest('tr').find('.cityId').text();

但警告我，我什么都没得到。

我的错误在哪里？

Answer 1

问题是上下文this，它不是点击的按钮。

对动态创建的元素采用Event delegation方法：

$('#cities').on('click', 'button.btn', function() {...}

＆＃13;

＆＃13;

$("#cities").empty();
var list = [{
  Id: 11,
  Name: "Name",
  RegionName: "RegionName"
}];

for (var i = 0; i <= list.length - 1; i++) {
  var tableData = '<tr>' + '<td>' +
    (i + 1) +
    '</td>' +
    '<td class="cityId" style="display:none">' +
    list[i].Id +
    '</td>' +
    '<td > ' +
    list[i].Name +
    '</td>' +
    '<td > ' +
    list[i].RegionName +
    '</td>' +
    '<td> ' +
    '<button type="button" class="btn btn-info">' + 'Удалить' + '</button>' +
    '</td>' +
    '</tr>';
  $('#cities').append(tableData);
}

$('#cities').on('click', 'button.btn', function() {
  let id = $(this).closest('tr').find('.cityId').text();
  console.log(id)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Город</th>
      <th scope="col">Регион</th>

    </tr>
  </thead>
  <tbody id="cities" style="overflow: auto;"></tbody>

＆＃13;

＆＃13;

＆＃13;

更好的选择是使用data-attributes

＆＃13;

＆＃13;

$("#cities").empty();
var list = [{
  Id: 11,
  Name: "Name",
  RegionName: "RegionName"
}];

for (var i = 0; i <= list.length - 1; i++) {
  var tableData = '<tr>' + '<td>' +
    (i + 1) +
    '</td>'  +
    '<td > ' +
    list[i].Name +
    '</td>' +
    '<td > ' +
    list[i].RegionName +
    '</td>' +
    '<td> ' +
    '<button data-city-id="'+list[i].Id+'" type="button" class="btn btn-info">' + 'Удалить' + '</button>' +
    '</td>' +
    '</tr>';
  $('#cities').append(tableData);
}

$('#cities').on('click', 'button.btn', function() {
  let id = $(this).data('city-id');
  console.log(id)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Город</th>
      <th scope="col">Регион</th>

    </tr>
  </thead>
  <tbody id="cities" style="overflow: auto;"></tbody>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jquery：

以下列方式修改代码

＆＃13;

＆＃13;

$(document).ready(function() {
    $('button').on('click', function() {
        console.log($(this).data('city-id'));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- // these are your buttons. -->
<button data-city-id="2">Delete</button>
<button data-city-id="3">Delete</button>
<button data-city-id="4">Delete</button>

＆＃13;

＆＃13;

＆＃13;

您可以生成如下按钮：

'<button type="button" class="btn btn-info" data-city-id="' + list[i].Id + '">' + 'Удалить' + '</button>'