jQuery 和动态生成的表单答案

【问题标题】：jQuery and dynamically generated formsjQuery 和动态生成的表单
【发布时间】：2010-11-04 10:00:06
【问题描述】：

我正在动态创建表单字段。

如果我使用

<script>
$().ready(function() {

    $("input[name=salesPrice1]").blur(function() {

        var nameID = $("input[name=salesPrice1]").val();

        alert(nameID);

        //var newName = $("input#newName").val();

        $.ajax({
            type: "POST",
            url: "cashPrice.cfm",
            data: "salePrice=" + $("input[name=salesPrice1]").val(),
            cache: false,
            success: function(data) {
                $("#cashPrice1").html(data);
            }
        });
    });
});
</script>

它会部分工作。现在，我必须动态获取 formField 的 ID/名称。我该怎么做？

【问题讨论】：

你的问题没有意义。更新它。
抱歉，但我不确定您所说的 formField 的 ID/名称，也不确定您所指的动态。
不知何故它没有发布我的服务器端代码。我有
一些冷融合循环...
所以这一行：$("input[name=salesPrice1]")。以某种方式获取文本输入的正确 ID。比如 1,2,3...

标签： jquery forms dynamic field

【解决方案1】：

试试这个？

$("input[name^=salesPrice]").each(function(){
    var input = $(this); 
    var name = input.attr('name');
    var num = /\d+$/.exec(name)[0];

    $(this).blur(function() {

        var nameID = input.val();

        alert(nameID);

        //var newName = $("input#newName").val();

        $.ajax({
        type: "POST",
        url: "cashPrice.cfm",
        data: "salePrice=" + nameID,
        cache: false,
        success: function(data) {
            $("#cashPrice"+num).html(data);
        }
        });
    });
});

【讨论】：

几乎。我不得不改变：数据：“salePrice=" + input.val(),
Wups... 好吧，让我们使用之前已经计算过的 nameID。编辑了答案。 :)

【解决方案2】：

您的问题充其量是模糊的。但这是否符合您的要求？：

$("input").blur(function ()
{
    var that = $(this);

    var id = that.attr("id");
    var name = that.attr("name");
});

更新：

您可以在值上匹配元素：

$("input[id^='hello']")

将匹配：

<input type="text" id="helloworld" />
<input type="text" id="helloearth" />

但不是：

<input type="text" id="hiworld" />

请参阅selector documentation。

注意：这些选择器很慢，我只会将它们用作最后的手段。为了提高性能，您可以对 DOM 节点的子集进行查询：

$("complex selector goes here", $("container node in which to query"))

【讨论】：

我在这个网站上的代码格式有问题。我有以下

我不认为我可以简单地使用$("input") 因为这个函数只需要应用于 salesPrice。
另外，我可以在页面加载时看到警报（1），但没有别的。

【解决方案3】：

这也有效：

<html>
<script type="text/javascript">
    $().ready(function() {
        alert('loaded');
        $('.salesPriceInput').blur(function ()
        {    
            alert($(this).attr("id"));
            var myID = $(this).attr("id").substr(10,1); 
            alert(myID);
            $.ajax({
                type: "get",
                url: "cashPrice.cfm",
                data: "salePrice=" + $('#salesPrice'+myID).val(),
                cache: false,
                success: function(data){
                   $('#cashPrice'+myID).html(data);
                }
            })
         }); 
    });
</script>


<form>
    <cfoutput>
        <cfloop from="1" to="3" index="i">
            <input type="text" name="salesPrice#i#" id="salesPrice#i#" class="salesPriceInput" value="" />
            <div id="cashPrice#i#"></div>
            <hr />
        </cfloop>
    </cfoutput>
</form>

【讨论】：

文本编辑器一直忽略我的
我的意思是添加

cfloop>
您应该跳过行并将代码缩进至少 4 个空格，以便格式化程序格式化您的代码。小心 substr ：有一天你可能会更改你的coldfusion文件中的名称而忘记更新你的javascript代码......然后你会很努力地挠头。
我编辑了您的答案以修复格式。需要在代码前面放置 4 个空格才能正确呈现。