Question

我正在尝试在我的计算机上运行http://jsfiddle.net/ddole/AC5mP/13/的代码，而我使用的方法是here。

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

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

Answer 1

参考 LIVE DEMO

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

我在fiddler上添加了一个依赖项，

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

jquery使用：last和val（）

1 个答案:

HTML：

JS：