Question

我目前正在进入一个我用Aax调用Api的地方从我的桌子上删除一个客户端。问题是，我之前曾尝试在执行ajax之前进行检查，但它似乎无法正常工作。

所以这次，当点击删除按钮时，我想首先检查用户是否确定要删除客户端，如果是，则执行删除功能。

问题是，我是这样的按钮的id：

<td class="text-center">
    <a type="button" class="btn btn-danger" value=('+value.id+') onclick="sureAboutDelete()">Delete Client</a>
</td>

然后在.js文件中我尝试了：

// Check if user wants to delete Client
function sureAboutDelete(){
    console.log((event.target));
    // var id = Get the value of value attribute
    // Ask for the user if he/she is sure about deleting
    If (true){
        // delete client using ID taken
        deleteClient($id);
    } else {
        // Just close prompt
        return;
    }
}

使用＆＃34;（event.target）＆＃34;我可以看到具有属性的所有按钮，但是放置＆＃34;（event.target）.val＆＃34;或者像这样，我不能接受我想要的身份。

有什么建议吗？

谢谢！

Answer 1

第一个：

由于多种原因，HTML中的

value=('+value.id+') 错误

value不是有效的<a>元素属性。请改用data-value。
您需要提前data-value，从后端说，已经嵌入到您的HTML中
Anchor的type不能"button"用于以MIME类型（MDN <a>）的形式指定媒体类型
If应为if
将this传递到您的onclick="sureAboutDelete(this)"

结果应如下所示:(纯JS）

＆＃13;

function sureAboutDelete(self) {

  event.preventDefault(); // Since it's an anchor, don't scroll the page.
  
  var id = self.dataset.clientid; // Get ID vrom data-clientid attribute
  
  if( id && confirm("Delete client: "+ id) ) deleteClient( id );

}


function deleteClient( id ) {
    console.log("DELETING CLIENT: %s", id);
    // 1. DELTE FROM DATABASE
    // 2. REMOVE ANY .clientId-N element from page
    var elements = document.querySelectorAll(".clientId-"+ id);
    if(!elements[0]) return;
    for(var i=0; i<elements.length; ++i) {
      elements[i].remove();
    }
}

＆＃13;

<table>

  <tr class="clientId-2">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="2" onclick="sureAboutDelete(this)">Delete Client 2</a>
    </td>
  </tr>

  <tr class="clientId-37">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="37" onclick="sureAboutDelete(this)">Delete Client 37</a>
    </td>
  </tr>
  
  <tr class="clientId-56">
    <td class="text-center">
      <a type="button" class="btn btn-danger" data-clientid="56" onclick="sureAboutDelete(this)">Delete Client 56</a>
    </td>
  </tr>

</table>

＆＃13;

或使用jQuery：（PS：不需要onclick=个东西）

＆＃13;

$(document).on("click", "[data-delete-client]", function(evt) {

  evt.preventDefault();

  // 1. retrieve client ID
  var id = $(this).data("delete-client");
  
  // 2. confirm
  if(!confirm("Really delete client: "+ id)) return; //do nothing if no confirmation, else:
  
  // 3. delete from database
  // (TODO)
  
  // 4. remove all .clientId-N elements
  $(".clientId-"+ id).fadeOut(400, function() {
    $(this).remove();
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <tr class="clientId-2">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="2">Delete Client 2</a>
    </td>
  </tr>

  <tr class="clientId-37">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="37">Delete Client 37</a>
    </td>
  </tr>
  
  <tr class="clientId-56">
    <td class="text-center">
      <a class="btn btn-danger" data-delete-client="56">Delete Client 56</a>
    </td>
  </tr>

</table>

＆＃13;

Answer 2

在jQuery中，您可以使用value方法获取attr()属性。

参考：http://api.jquery.com/attr/

示例：

$(document).ready(function() {

    $('.btn-danger').click(function() {
        var sId = $(this).attr('value');

        // Use confirm() to show a certain confirm alert message
        var bConfirmMsg = confirm('Are you sure you want to delete this?');

        if (bConfirmMsg === true) {
            // delete client using ID taken
            deleteClient(sId);
        }
    });

    function deleteClient(sId) {
       // rest of code...
    }

});

如何获得价值＆＃34;价值＆＃34;一个调用函数的按钮

2 个答案: