调用 jQuery 函数时 onClientClick 不起作用答案

【问题标题】：onClientClick not working when calling a jQuery function调用 jQuery 函数时 onClientClick 不起作用
【发布时间】：2013-06-24 10:24:36
【问题描述】：

我想在用户单击 ASP.NET 服务器端按钮时触发 jQuery 表单显示。

但是，当我在运行时单击按钮时，页面重新加载非常快.. 没有打开 jQuery 表单..

我正在尝试创建的效果可以在这里看到：JSFiddle

基本上我想在有人点击 ASP.NET 按钮时打开同一个对话框..

这是我的代码：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<asp:Button ID="createuser" runat="server" Text="Button" OnClientClick='$("#dialogform").dialog("open");'/>


<script type="text/javascript">

$(function() {

    $( "#dialogform" ).dialog({
      autoOpen: false,
      height: 300,
      width: 450,
      modal: true,
      buttons: {
        "Create an account": function() {
          alert('Hello');
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        $( this ).dialog( "close" );
      }
    });
  });

</script>

我也尝试过使用jQuery 而不是$ 标识符来调用jQuery 函数。而且我还尝试删除onClientClick 事件，并尝试将此代码用于上面的脚本块：

<script type="text/javascript">

$(function() {

    $( "#dialogform" ).dialog({
      autoOpen: false,
      height: 300,
      width: 450,
      modal: true,
      buttons: {
        "Create an account": function() {
          alert('Hello');
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        $( this ).dialog( "close" );
      }
    });

    $( "#createuser" )
      .button()
      .click(function() {
        $( "#dialogform" ).dialog( "open" );
      });
  });

</script>

谁能找出问题所在？

【问题讨论】：

是否打开对话框？它给了什么？你检查浏览器控制台了吗？
不打开对话框.. 只快速重新加载页面..

标签： javascript jquery html asp.net onclientclick

【解决方案1】：

而不是使用

<asp:Button ID="createuser" runat="server" Text="Button" OnClientClick='$("#dialogform").dialog("open");'/>

尝试使用

<input type='button' value="Button"  onclick='$("#dialogform").dialog("open");' />

【讨论】：

不工作..首先在$符号上给了我一个错误..当我切换到jQuery它开始给我) expected错误..我已经检查了..没有遗漏的括号..此外，我认为OnClick仅用于服务器端功能..

【解决方案2】：

试试这个：

如果您直接引用服务器端的控件，ClientID 应该包括任何 NamingContainer 信息（来自 GridView 或 Repeater 或其他任何地方）。使用浏览器的开发者工具（IE 有开发者工具、火狐的 Firebug 等）找出控件的客户端 ID，然后调试 JavaScript。

function  DoStuff() {
     $( "#dialogform" ).dialog( "open" );
     return false;
 });


<asp:LinkButton id="createuser" OnClientClick="DoStuff();" runat="server">

【讨论】：

虽然我在服务器端按钮上使用 onClientClick 来调用客户端 JavaScript 函数，但实际上并不需要 .. 不是相反 ..
那你调用的是哪个函数onclientClick()？
是的，我使用onClientClick 来调用JavaScript 函数.. 这也可以从我上面的代码中看出..
没有您创建的可以通过单击onClientClick() 执行的函数。您发布的代码仅在 DOM Ready 上执行，而不是 onClientClick()。首先检查 jQuery 的文档

【解决方案3】：

您的按钮可能会回传到服务器，您需要像这样防止这种情况发生：

<asp:Button ID="createuser" runat="server" Text="Button" OnClientClick='$("#dialogform").dialog("open"); return false;'/>

如果 Swapnil 上面提到的 html 输入在 '$' 上抛出错误，那么听起来 jQuery 要么没有加载，要么 '$' 被其他东西接管了。我会使用您浏览器的开发人员工具来查看是否正在下载 jQuery。在 IE 中，按 F12，进入 Network 选项卡，单击“开始捕获”按钮，刷新页面，然后使用 jQuery 检查该行。

【讨论】：