Question

当用户点击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>

任何人都可以确定问题是什么吗？

Answer 1

而不是使用

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

尝试使用

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

Answer 2

试试这个：

如果您直接引用服务器端的控件，则ClientID应包含任何NamingContainer信息（来自GridView或Repeater或其他任何地方）。找出控件的客户端ID使用浏览器的开发人员工具（IE包含Developer Tools，Firebug for Firefox等），然后调试JavaScript。

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


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

Answer 3

您的按钮很可能会回发到服务器，您需要像这样阻止：

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

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

onClientClick在调用jQuery函数时不起作用

3 个答案: