Question

当用户点击链接时，我正在尝试打开一个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>

（我将把表格改为divs。）

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

...问候

Answer 1

在您的链接中

<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');
         });
      }); 
});

Just an example

Answer 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>

Answer 3

我对.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 Object Notation），其中属性或值与以下格式的名称或键配对：

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,
    });
});

在jquery模式对话框中单击加载外部php文件

3 个答案: