8

当用户单击链接时，我试图打开一个 jquery 模式对话框。然后我想将一个外部 php 文件加载到对话框中。我正在使用这个 jquery：

$(document).ready(function() { 
     $('#register').dialog({
         title: 'Register for LifeStor',
         resizable: true,
         autoOpen:false,
         modal: true,
         hide: 'fade',
         width:350,
         height:275,
      });//end dialog   
      $('#reg_link').click (function() {
          open: (function(e) {
             $('#register').load ('register.php');
        });
      }); 
    });

这个html：

<div id="register"></div>

在 .css 文件中设置为 display:none 。

更进一步，在表单内部，链接被称为：

<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td>

（我会将表格更改为 div）。

这段代码我没有收到任何错误，但是当我单击链接时没有任何反应。我从其他堆栈溢出帖子中获得了上述大部分内容。我错过了什么吗？表格 html 有干扰吗？

问候...

4

3 回答 3

17

在您的链接中

<a href="#" name="reg_link">Sign-Up!</a>

你有name="reg_link"那个应该是id="reg_link"，即

<a href="#" id="reg_link">Sign-Up!</a>

所以它将与以下代码一起使用

$('#reg_link').click(function(e) {
    e.preventDefault();
    $('#register').load('register.php');
});

要使其成为对话框，您可以使用

$(document).ready(function() { 

     var dlg=$('#register').dialog({
        title: 'Register for LifeStor',
        resizable: true,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width:350,
        height:275
     });


     $('#reg_link').click(function(e) {
         e.preventDefault();
         dlg.load('register.php', function(){
             dlg.dialog('open');
         });
      }); 
});

只是一个例子。

于 2012-08-14T21:21:01.863 回答
2

加载页面后创建对话框.load()，将容器的内容替换为新内容

你的点击处理程序有语法错误，看起来你传递了一个函数和一个对象的组合作为参数，它应该是一个正常的函数。像

$('selector').click (function() {
     //code
});

此外，您的<a>元素reg_link的名称不是 id

$(document).ready(function() { 
    $('#reg_link').click (function() {
        $('#register').load ('register.php', function(){
            $('#register').dialog({
                title: 'Register for LifeStor',
                resizable: true,
                modal: true,
                hide: 'fade',
                width:350,
                height:275,
            });//end dialog   
        });
    });
});

<td><font size="2">Not registered? <a href="#" name="reg_link" id="reg_link">Sign-Up!</a></td>
于 2012-08-14T21:02:38.230 回答
1

我对该.dialog()功能并不完全熟悉，但是您使用.click()错误。部分问题是关于花括号的一些混淆{}。它们用于两个完全独立的事情，而您在这里将两者混合在一起。

花括号的第一个用途是表示块的内部：循环内部、条件内部、函数内部。例如：

// some code in the global scope
function something()
{
    // some different code within this function block
}
// function's done, we're back in global scope

第二种用途是用于对象或关联数组的 JSON（JavaScript 对象表示法），其中属性或值与以下格式的名称或键配对：

var jsonSomething = {
    key1: value1,
    key2: value2,
    etc: etcvalue,
};

当您编写 时$('#reg_link').click (function() {，您打开的是带有花括号的功能块，而不是启动 JSON。因此，当您编写时open:（好像这是一个 JSON 并且您正在设置open密钥），某些事情肯定不会按照您期望的方式工作（我很惊讶......有点......没有错误，实际上）。您需要在这些花括号中编写的是函数代码。在这种情况下，它可能只是这样：

$('#reg_link').click (function() {
    $('#register').load ('register.php');
});

一般来说，jQuery 经常使用这两个版本，并且经常将它们混合在一起（接受 JSON 作为参数的函数，或包含函数回调作为条目的 JSON），因此了解哪个是哪个非常重要。

编辑：一些谷歌搜索：.dialog()建议您还需要在之后调用它.load()，这意味着该块应如下所示：

$('#reg_link').click (function() {
    $('#register').load ('register.php').dialog(/*argument(s) here*/);
});

根据您自己的代码，.dialog()实际上是一个将 JSON 作为参数的函数示例，因此假设该位正确，完整代码如下所示：

$('#reg_link').click (function() {
    $('#register').load ('register.php').dialog({
        title: 'Register for LifeStor',
        resizable: true,
        autoOpen: false,
        modal: true,
        hide: 'fade',
        width:350,
        height:275,
    });
});
于 2012-08-14T21:05:29.893 回答