0

我正在尝试在我的机器上运行来自http://jsfiddle.net/ddole/AC5mP/13/的代码，我使用的方法如下或此处。

你知道为什么该代码在我的机器上不起作用吗？Firebug 对我没有帮助，我也无法解决问题。我想我需要另一双眼睛:(((

在萤火虫，控制台选项卡中，我没有收到任何错误消息。问题是，在我按下保存按钮后，我无法从对话框中获取该输入的值。$('input:last').val() 似乎是空的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script  type="text/javascript" >
        jQuery(function($) {
            $('.helpDialog').hide();
            $('.helpButton').each(function() {  
                $.data(this, 'dialog',
                $(this).next('.helpDialog').dialog({
                    autoOpen: false,  
                    modal: true,  
                    width: 300,  
                    height: 250,
                    buttons: {
                        "Save": function() {
                            alert($('.helpText:last').val());
                            $(this).dialog( "close" );
                        },
                        Cancel: function() {
                            $(this).dialog( "close" );
                        }
                    }
                })
            );  
            }).click(function() {  
                $.data(this, 'dialog').dialog('open');  
                return false;  
            });  
        });  
    </script>
</head>
<body>

    <span class="helpButton">Button</span>
    <div class="helpDialog">
        <input type="text" class="helpText" />
    </div>

    <span class="helpButton">Button 2</span>
    <div class="helpDialog">
        <input type="text" class="helpText" />
    </div>

    <span class="helpButton">Button 3</span>
    <div class="helpDialog">
        <input type="text" class="helpText" />
    </div>

    <span class="helpButton">Button 4</span>
    <div class="helpDialog">
        <input type="text" class="helpText" />
    </div>

    <span class="helpButton">Button 5</span>
    <div class="helpDialog">
        <input type="text" class="helpText" />
    </div>    </body>

4

1 回答 1

1

参考现场演示

为了在保存时显示文本，我已将您的行修改alert($('.helpText:last').val());为此alert($('.helpText', this).val());

我又增加了一个对提琴手的依赖，

http://code.jquery.com/ui/1.8.21/jquery-ui.min.js

现在它按预期工作。

HTML：

<span class="helpButton">Button</span>
<div class="helpDialog">
    <input type="text" class="helpText" />
</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">
    <input type="text" class="helpText" />
</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">
    <input type="text" class="helpText" />
</div>
<span class="helpButton">Button 4</span>
<div class="helpDialog">
    <input type="text" class="helpText" />
</div>
<span class="helpButton">Button 5</span>
<div class="helpDialog">
    <input type="text" class="helpText" />
</div>

JS：

jQuery(function($) {
  $('.helpDialog').hide();
  $('.helpButton').each(function() {  
    $.data(this, 'dialog', 
      $(this).next('.helpDialog').dialog({
        autoOpen: false,  
        modal: true,  
        width: 300,  
        height: 250,
        buttons: {
            Save: function() {
                alert($('.helpText', this).val());
                $(this).dialog( "close" );
            },
            Cancel: function() {
                $(this).dialog( "close" );
            }
          }
      })
    );  
  }).click(function() {  
      $.data(this, 'dialog').dialog('open');  
      return false;  
  });  
});
于 2012-07-07T09:34:22.727 回答