通行證[對象物體]對函數

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>