通行证[对象物体]对函数

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

您需要在$符号中包装'this'。所以在你的情况下将是$（row）

Answer 2

请澄清， “问题是，当#deleteConfirmBtn按钮的点击处理程序将此作为参数时，它将显示为[Object object]，这将不起作用。 “ 这是什么的HTML，你如何通过这个'价值这个功能。

我的问题，为什么需要通过这个，当你已经绑定点击事件的按钮。 这个值应该已经在函数中传递了。

感谢 阿希什

Answer 3

您可以使用事件处理来使用jQuery。如果您使用Javascript注册点击处理程序，则不需要将this传递给该函数。 jQuery自动为您提供该参考。

我曾做过多次修改你的代码，使正在运行的例子，而无需使用引导：

1. 每个删除按钮现在富人data属性data-row="x"其中x是行的数量。我还添加了一个标签类来检索所有这些按钮：.btn-delete。
2. 正如你所看到的，点击处理程序是在Javascript上注册的。一旦你点击一个删除按钮，行号就会从先前设置的数据区中检索出来。
3. 每当您处理一个确认删除事件时，您需要解除绑定点击处理程序。如果您不这样做，您可能会以意外的行为结束之前的删除操作再次触发。

// 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>