一个按钮中的两个 onClick 功能，并希望一个接一个地发生一个点击功能

Question

Actually i am trying to add a dialog box on the click of a button. But on the OnClick function of that button, i had already called function of a controller. The HTML code for this is:

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

Now after writing below jquery, both click funtions are working simultaneously. But i want to first confirm by clicking OK button of dialog box and the controller action to be called.

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

Any help would be appreciated. Thanks in advance..

Answer 1

You don't need multiple function. I would recommend too get rid of inline click handler completely.

You can store the url using data-* prefixed custom attribute which can be fetched using HTMLElement.dataset property.

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

Then you can use following script

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

Write both the function on single onclick attribute like: onclick="firstFunction();SecondFunction();"

If you have confirm/alert box in firstFunction then.The confirm/alert function halts execution of the code until it's dismissed.This mean secondFunction will be called when firstFunction confirm is closed.

Answer 3

您想在单击按钮时执行某些操作，仅当用户单击确认对话框时才确定，因此您需要在单击“确定”按钮时调用“您的操作方法”/操作代码（您需要执行）对话框而不是再次显式调用“click()”操作。