Question

您好我有一个按钮，将this传递给下面的函数：

<div class="itemRow">
<a href="javascript:void(0);" onclick="deleteMessage(this, 3);" class="btn btn-primary">Delete</a>
</div>

为了保持这一点，我删除了itemRow div中的其他元素。本质上，这个div包含有关项目的信息以及删除该项目的按钮。每个项目都有itemRow div，因此页面上有很多。我想确定按钮调用来自哪一行，以便在实际删除项目时删除正确的行。

function deleteMessage(row, itemNum){
$('#deleteMsgModal').modal('show');
//Change the modal buttons's onclick handler
$("#deleteConfirmBtn").click(function(){ deleteRow(row, itemNum);});
}

因此上面的函数将显示一个要求确认的模态。模态中按钮的onclick处理程序接收this对象和项目编号，然后该项目编号将转到单独的函数deleteRow，该函数实际删除该行并删除该行。

function deleteRow(contentRow, itemNo){
var item = itemNo;
//do some ajax code to remove the row from the database...
...
//then once it is removed then to remove the div that is showing the row...
$(contentRow).parent().remove();
}

问题是，当#deleteConfirmBtn按钮的点击处理程序将this作为参数时，它会将其显示为[Object object]，这将无效。有没有办法解决这个问题，以便最终的功能可以删除正确的div？

Answer 1

你需要包装这个＆＃39;在$ sign。所以在你的情况下将是$（行）

Answer 2

请澄清， “问题在于，当#deleteConfirmBtn按钮的click处理程序将其作为参数接收时，它会将其显示为[Object object]，这将无效。” html在哪里以及如何将'this'值传递给此函数。

我担心，当你已经将click事件绑定到按钮时，为什么需要传递 this 。此值应该已在函数中传递。

由于阿希什

Answer 3

您可以使用jQuery附带的事件处理。如果您在Javascript中注册点击处理程序，则无需将this传递给该函数。 jQuery会自动为您提供该引用。

我对您的代码进行了一些更改，以便在不使用bootstrap的情况下制作一个运行示例：

每个删除按钮现在都有一个数据属性data-row="x"，其中x是行的编号。我还添加了一个标记类来检索所有这些按钮：.btn-delete。
如您所见，点击处理程序已在Javascript上注册。单击删除按钮后，将从先前设置的数据属性中检索行号。
每次处理确认删除事件时，都需要取消绑定点击处理程序。如果不这样做，您可能会以意外行为结束，而以前的删除操作会再次触发。

// Event delegated subscription for all the delete events
$(document).on('click', '.btn-delete', function(event) {
  // Prevent navigation event of the anchor
  event.preventDefault();
  // Get the info of the clicked event
  let rowElement = $(this);
  let rowNumber = rowElement.data('row');
  // Show the confirmation message
  $('#deleteMsgModal').show();
  //Change the modal buttons's onclick handler
  $("#deleteConfirmBtn").click( function(ev) {
    // Prevent event propagation
    ev.preventDefault();
    // Remove the 'modal' message and unbind this click event handler
    $('#deleteMsgModal').hide()
    $(this).unbind('click');
    deleteRow(rowElement, rowNumber);
  });
});

function deleteRow(contentRow, itemNo){
  let item = itemNo;
  alert('Item #' + itemNo + ' removed succesfully');
  // do some ajax code to remove the row from the database...
  // ...
  // then once it is removed then to remove the div that is showing the row...
  contentRow.parent().remove();
}

#deleteMsgModal {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemRow">
  <span>Row 1</span>
  <a href="#" data-row="1" class="btn btn-primary btn-delete">Delete</a>
</div>
<div class="itemRow">
  <span>Row 2</span>
  <a href="#" data-row="2" class="btn btn-primary btn-delete">Delete</a>
</div>
<div class="itemRow">
  <span>Row 3</span>
  <a href="#" data-row="3" class="btn btn-primary btn-delete">Delete</a>
</div>
<div id="deleteMsgModal">
  You are about to delete a row. Are you sure?
  <a href="#" id="deleteConfirmBtn" class="btn btn-danger">Confirm delete</a>
<div>

将[Object object]传递给函数

3 个答案: