javascript - 如何获取调用jquery对话框的元素ID

Question

我正在使用 jquery 对话框在按钮单击时打开弹出窗口。

    <script>
        $(document).ready(function(){
            $("#dialog-form").dialog({
                autoOpen : false,
                height : 300,
                width : 350,
                modal : true,
                buttons : {
                    "Add" : function() {

                        $(this).dialog("close");
                    },
                    Cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    //if button1 is clicked 
                    alert("hello");
                   //if button2 is clicked
                   alert("bye");
                }
            });

        });
        function openWindow(){
            $("#dialog-form").dialog("open");
            }

    </script>
<button id="nameButton" onclick="openWindow()">click</button>
<button id="titleButton" onclick="openWindow()">click</button>

如何在jquery对话框的close方法中获取按钮的id？

Answer 1

如果您要使用 onclick 属性，则需要将一些信息传递给函数，以便您可以访问触发事件的元素。

<button id="nameButton" onclick="openWindow(this)">click</button>
<button id="titleButton" onclick="openWindow(this)">click</button>

---

function openWindow(button){
    alert(button.id);
    $("#dialog-form").dialog("open");
}

不过，如果您改为给按钮一个类并使用 jQuery 绑定事件，那会“更好” 。

<button class="open-window" id="nameButton">click</button>
<button class="open-window" id="titleButton">click</button>

---

$(document).ready(function(){
    //... your existing code ...
    $(".open-window").click(function(){
        alert(this.id)
        $("#dialog-form").dialog("open");
    });
});

接下来，无论您使用两种方法中的哪一种，您都需要将该数据存储在对话框中。

$("#dialog-form").dialog("open").data("opener",this.id);

现在您可以使用

$("#dialog-form").data("opener")

Answer 2

或者您可以使用on或bind或click事件，例如：

$(#nameButton).bind('click', function(event){});
$(#nameButton).on('click', function(event){});
$(#nameButton).click(function(event){});

在事件参数上，您可以获得所需的所有信息...