JavaScript+点击功能

Question

我有一个调用另一个函数的 JavaScript 函数，我现在面临一个问题，我必须单击按钮两次才能显示模式对话框，我知道问题很可能出在这一行:

 $('#dialog_link').click(function()  because I already called 'modaldialog' with an onclick like this:

<input id="dialog_link" type="button" value="Save" onclick ="javascript:modaldialog();"  />

如何重写此行 $('#dialog_link').click(function() 来调用 function() 而无需再次单击？

谢谢!

<script type="text/javascript"> 

function modaldialog() {
             window.Page_ClientValidate();  

 if (window.Page_IsValid) {


                $('#dialog_link').click(function() {
                     $('#dialog').dialog('open');

                return false;
                 });
             }}

 </script>


<script type="text/javascript">
     $(function() {

        // Accordion
         $("#accordion").accordion({ header: "h3" });

        // Tabs
         $('#tabs').tabs();


        // Dialog   
         $('#dialog').dialog({
                 autoOpen: false,
                 width: 600,
                 modal:true,

                close: function() {
                     document.getElementById('dialog').style.display = 'block';
                     document.getElementById('fade').style.display = 'None';
                 },


                buttons: {
                     "Ok": function() {
                         $(this).dialog("close");
                         document.getElementById('dialog').style.display = 'block';
                         document.getElementById('fade').style.display = 'None';
                     },
                     "Cancel": function() {
                         $(this).dialog("close");
                         document.getElementById('dialog').style.display = 'block';
                         document.getElementById('fade').style.display = 'None';
                     }
                 }
             });


        // Dialog Link
         //$('#dialog_link').click(function() {
         //    $('#dialog').dialog('open');
         //    return false;
         //});

        // Datepicker
         $('#datepicker').datepicker({
                 inline: true
             });

        // Slider
         $('#slider').slider({
                 range: true,
                 values: [17, 67]
             });

        // Progressbar
         $("#progressbar").progressbar({
                 value: 20
             });

        //hover states on the static widgets
         $('#dialog_link, ul#icons li').hover(
             function() { $(this).addClass('ui-state-hover'); },
             function() { $(this).removeClass('ui-state-hover'); }
     );

    });
 </script>

Answer 1

我不确定你的真正目标是什么，但我不认为 .click(func) 会做你认为的那样。由于 .click(func) 会在每次执行此行时将该函数添加为单击事件监听器，因此您将在监听器集中获得一个附加函数。您似乎在 onClick 中运行此操作，这意味着每次有人单击您的链接时，您都会添加另一个执行相同操作的监听器 ($('#dialog').dialog('open'); )。如果您只想在替换 onClick 处理程序之前完成验证，您还必须取消绑定(bind)当前函数，但最好每次都进行检查并调用 if (window.Page_IsValid) block 中的 $('#dialog').dialog('open') 。

如果您真正想要的是 modaldialog 仅被调用一次，并且 $('#dialog').dialog('open'); 执行一次，并且每次连续点击都会执行在您的条件中遵循以下内容:

$('#dialog_link').unbind('click', this);
var f = function () { $('#dialog').dialog('open') }; // Function to replace onClick function.
$('#dialog_link').click(f);
f(); // Execute replacement function after assigning it.