在函数调用而不是.click（）中打开模式

Question

I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'

$(document).ready(function () {
                $('#[id*=btnClr]').onload(function () {
                    $dialog.dialog('open');
                });

                var $dialog = $("#trUI").dialog({
                    autoOpen: false,
                    title: "Edit Configurations",
                    width: "auto",
                    buttons: {
                        "Submit": function (e) {
                            AddKeyValue();
                            $(this).dialog('close');
                        },
                        "Cancel": function (e) {
                            ClearKeyVal();
                            $(this).dialog('close');
                        }
                    }
                });
            });

I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.

I was able to achieve this with this code

function modalOpen() {

                        var $dialog = $("#trUI")
                            .dialog({
                                title: "Edit Configurations",
                                width: "auto",
                                buttons: {
                                    "Submit": function(e) {
                                        AddKeyValue();
                                        $(this).dialog('close');
                                    },
                                    "Cancel": function(e) {
                                        ClearKeyVal();
                                        $(this).dialog('close');
                                    }
                                }
                            });
            }

However, any one of the buttons will only work once.

Does anybody have any recommendations for how to do this?

Answer 1

I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.

Answer 2

I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")

 // some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}

$(document).ready(function () {
                $("#trUI").dialog({
                    autoOpen: false,
                    title: "Edit Configurations",
                    width: "auto",
                    buttons: {
                        "Submit": function (e) {
                            AddKeyValue();
                            $(this).dialog('close');
                        },
                        "Cancel": function (e) {
                            ClearKeyVal();
                            $(this).dialog('close');
                        }
                    }
                });
            });