JQuery 无法获取动态添加字段的值

JQuery can't get value of dynamically added fields

本文关键字：字段 添加 动态 获取 JQuery      更新时间：2023-09-26

我有一个隐藏的div，形式很简单：

<div id="mb_clookup" style="display: none;">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <font color="#FFF">
        Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <span id="cl_search">Search</span>
    </font>
</div>

当用户单击页面上的按钮时，将显示此信息。用户输入邮政编码，单击搜索并调用 JSON 查询。我已经设法使搜索按钮与 .live（） 一起使用，但我无法获取输入字段的值。这是代码：

$(document).ready(function(){ 
    $(document).on( "click", "#cl_search", function() {
        var pc = $('#cl_zipcode').val();
        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            // JSON
        }
    });
});

PC变量为空。我试过了：$(this).find('#cl_zipcode').val()这会产生未定义。请指教。

您可以使用以下内容

var pc= $("#mb_clookup").find('#cl_zipcode').val();

或 

var pc= $("#mb_clookup :input").val();

检查小提琴

关于$(this).find('#cl_zipcode').val()输入元素位于单击的范围旁边，因此您的查找将从范围向下搜索（除了文本之外，它不包含任何内容）。

在找到它之前，您需要先向上移动 DOM。

$(this).parent().find('#cl_zipcode').val()

请注意，由于 ID 是唯一的，因此您的原始代码实际上很好（只要您只添加了其中一个）：http://jsfiddle.net/TrueBlueAussie/djqfharu/

如果您加载了多个元素（您提到动态添加字段），则需要切换到类来标识元素。

例如

$(document).ready(function(){ 
    $(document).on( "click", ".cl_search", function() {
        var pc = $(this).parent().find('.cl_zipcode').val()
        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            // JSON
        }
    });
});

这是因为浏览器保留了 ID 与 DOM 元素的快速查找字典，因此每个 ID 只保留一个条目。这样做的结果是，jQuery只能找到第一个匹配的元素来搜索重复的ID。解决方案是切换到使用类和基于类的搜索。

我强烈建议您发布其余代码，因为显示的部分不是孤立的问题。

我弄错了你的HTML代码。Becouse 标签未使用标签 标签不支持HTML5。

更改此内容 

<div id="mb_clookup" style="display:block;">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <span style="color="#FFF">
        Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <span id="cl_search">Search</span>
    </span>
</div>

祝你好运

您的代码工作正常，我通过删除 show none 属性在jsfiddle中检查了它。你可以在这里查看

.HTML 

<div id="mb_clookup">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <font color="#FFF">
    Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <button id="cl_search">Search</button>
    </font>
</div>

.JS

$(document).ready(function(){ 
    $(document).on( "click", "#cl_search", function() {
        var pc = $('#cl_zipcode').val();
        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            alert(pc);
        }
    });
});
相关文章：