一個按鈕中的兩個 onClick 功能，並希望一個接一個地發生一個點擊功能

Question

實際上，我試圖通過單擊按鈕添加一個對話框。 但是在那個按鈕的 OnClick 函數上，我已經調用了一個控制器的函數。 用於此的 HTML 代碼是：

<div class="pro-btn btn">
                        @{
<input type="button" id="place-bid-button-@Model.ProductId" class="button-1"value="@T("Nopaholics.Auction.AuctionDetailView.PlaceBid")" data-   productid="@Model.ProductId" 
onclick="Auction.placeBid('@Url.RouteUrl("Nopaholics.Auction.PlaceBid", new { productId = Model.ProductId, auctionId = Model.AuctionId })', '#product-details-form');return false;" />
}
</div>   

現在在 jquery 下面寫完之后，兩個點擊功能同時工作。 但我想首先通過單擊對話框的確定​​按鈕和要調用的控制器動作來確認。

<script> 
$('#place-bid-button-'+@Model.ProductId.ToString()).click(function(e){

$( "#dialog-confirm" ).dialog({
    resizable: false,
    height:160,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
            $("#place-bid-button-@Model.ProductId.ToString()").click();
            },
            Cancel: function(e) {
                $( this ).dialog( "close" );
                $('#place-bid-button-'+@Model.ProductId.ToString()).die();
                console.log(e);
                //return false;
                //e.preventDefault();
            }
        }
    });
});
</script>

任何幫助，將不勝感激。 提前致謝..

Answer 1

您不需要多種功能。 我也建議完全擺脫內聯點擊處理程序。

您可以使用data-*前綴的自定義屬性存儲 url，該屬性可以使用HTMLElement.dataset屬性獲取。

HTML

@{
    <input type="button" class="place-bid-button button-1"
            value="@T("Nopaholics.Auction.AuctionDetailView.PlaceBid")" 
            data-url="@Url.RouteUrl("Nopaholics.Auction.PlaceBid", new { productId = Model.ProductId, auctionId = Model.AuctionId })"
            data-form="#product-details-form"/>
}

然后你可以使用以下腳本

//Bind click hndler using a common class
$('.place-bid-button').click(function(e) {
    //Store the refrence in a variabled
    var self = this;

    $("#dialog-confirm").dialog({
        resizable: false,
        height: 160,
        modal: true,
        buttons: {
            "OK": function() {
                //Cal the method with url and form name
                Auction.placeBid(self.dataset.url, self.dataset.form);
                $(this).dialog("close");

            },
            Cancel: function(e) {
                $(this).dialog("close");
            }
        }
    });
});

Answer 2

在單個onclick屬性上編寫兩個函數，例如： onclick="firstFunction();SecondFunction();"

如果您在 firstFunction 中有confirm/alert框，則confirm/alert功能會暫停代碼的執行，直到它被解除。這意味着當 firstFunction 確認關閉時，將調用 secondFunction。

Answer 3

您想在單擊按鈕時執行某些操作，僅當用戶單擊確認對話框時才確定，因此您需要在單擊“確定”按鈕時調用“您的操作方法”/操作代碼（您需要執行）對話框而不是再次顯式調用“click()”操作。