javascript - 将 JQuery 上下文 $(this) 传递给另一个函数并检索上下文数据

Question

我正在使用 Metronic bootstrap 管理它们，它附带 sweetalert - 这是一个警报库

我想做的是在尝试从表中删除记录时发出确认警报，每行都有一个删除按钮

现在 Metronic 已经对其进行了一些扩展，因此您现在可以使用 html 5“数据”以声明方式声明标题、按钮类型等。

在我的 MVC 应用程序中，以下 Razor 代码迭代并添加按钮，请注意，我向其中添加了 data-id 属性 - 这个想法是，当单击按钮以获取 id 时，我可以提取它删除它

例如

<button data-id="@u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
                                    <i class="fa fa-times"></i>
                                </button>

以下是 Metronic JS 扩展文件 - 我向其中添加了几行代码，因此它在单击确认选项时调用自定义函数。

我的想法是，我可以完整保留 Metronic 主题的添加内容，并在需要的页面上调用自定义函数

请注意，我还将 $(this) 上下文传递给我的自定义函数

var SweetAlert = function () {

return {
    //main function to initiate the module
    init: function () {
        $('.mt-sweetalert').each(function(){
            var sa_title = $(this).data('title');
            var sa_message = $(this).data('message');
            var sa_type = $(this).data('type'); 
            var sa_allowOutsideClick = $(this).data('allow-outside-click');
            var sa_showConfirmButton = $(this).data('show-confirm-button');
            var sa_showCancelButton = $(this).data('show-cancel-button');
            var sa_closeOnConfirm = $(this).data('close-on-confirm');
            var sa_closeOnCancel = $(this).data('close-on-cancel');
            var sa_confirmButtonText = $(this).data('confirm-button-text');
            var sa_cancelButtonText = $(this).data('cancel-button-text');
            var sa_popupTitleSuccess = $(this).data('popup-title-success');
            var sa_popupMessageSuccess = $(this).data('popup-message-success');
            var sa_popupTitleCancel = $(this).data('popup-title-cancel');
            var sa_popupMessageCancel = $(this).data('popup-message-cancel');
            var sa_confirmButtonClass = $(this).data('confirm-button-class');
            var sa_cancelButtonClass = $(this).data('cancel-button-class');

            $(this).click(function(){
                //console.log(sa_btnClass);
                swal({
                  title: sa_title,
                  text: sa_message,
                  type: sa_type,
                  allowOutsideClick: sa_allowOutsideClick,
                  showConfirmButton: sa_showConfirmButton,
                  showCancelButton: sa_showCancelButton,
                  confirmButtonClass: sa_confirmButtonClass,
                  cancelButtonClass: sa_cancelButtonClass,
                  closeOnConfirm: sa_closeOnConfirm,
                  closeOnCancel: sa_closeOnCancel,
                  confirmButtonText: sa_confirmButtonText,
                  cancelButtonText: sa_cancelButtonText,
                },
                function(isConfirm){
                   //action function on click
                    if (isConfirm){
                        swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");


                        //custom function call added by me
                        //------------------------------------------
                        if(typeof onConfirmClick === "function")
                            onConfirmClick.call(this);
                        //------------------------------------------


                    } else {
                        swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
                    }
                });
            });
        });    

    }
}

}();

jQuery(document).ready(function() {
    SweetAlert.init();
});

我的页面中的功能:

<script type="text/javascript">
    function onConfirmClick() {
        alert($(this).data('id'));
        //make Ajax call here
    }
</script>

现在的问题是，我得到了 ($this) 但无法从按钮获取 id 或任何属性

如果我在控制台中打印 $(this)

只有“这个”

这里的问题是:

1. 如何在函数中获取 data-id 属性？如果我尝试 $(this).data('id') - 我得到未定义
2. 这是正确的设计方法吗？我希望能够在确认时调用自定义函数，但不中断 sweetalert 上的 Metronic 扩展？

Answer 1

将 id 从按钮的 data-id 传递到 onConfirmClick() 函数... 我会尝试通过变量使其传输。

因此，单击 .mt-sweetalert 时，就会触发 SweetAlert。

没有什么可以阻止您使用另一个 click 处理程序将 id 存储在函数可访问的变量中。

var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
  sweetAlertId = $(this).data("id");
});

然后在函数中:

function onConfirmClick() {
    alert(sweetAlertId);
    //make Ajax request using sweetAlertId here!
}

简而言之，id 不会强制通过 SweetAlert 中转!
;)