Question

我有一个隐藏的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()这是未定义的。请指教。

Answer 1

您可以使用以下

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

或

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

检查fiddle

Answer 2

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

您需要先找到它，然后再找到它。

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

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

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

e.g

$(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。解决方案是切换到使用类和基于类的搜索。

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

Answer 3

我认为你的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>

祝你好运

Answer 4

您的代码工作正常我通过删除display none属性在jsfiddle中进行了检查。您可以查看here

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

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

4 个答案: