Question

我正在使用Ajax动态插入一些<input type='text'>元素，但是当我更新它们时，value实际上并未在DOM中更新。

假设我有一个值为old的字段，然后我使用新值new更新...如果我在Chrome控制台中写了alert($("input[value='new']").val());（之后）更新当然）它只是提示undefined提示，但我仍然可以搜索old值！？

请查看我的 JSFiddle demo 以了解我的问题。如果您不更改<input type='text'>值但只更改<select>选项，一切正常，我可以看到哪些组是某个选项的成员，但是如果我更改<input type='text'>然后它不再起作用了。

请注意，由于元素来自Ajax调用，因此需要$(document).on("change"...。

HTML：

<p>
    <input type="text" value="Group 1" data-id='123' />
    <select multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</p>
<p>
    <input type="text" value="Group 2" data-id='abc' />
    <select multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</p>
<hr>
<ul class="group" data-id='123'> <span>Group 1</span>
    <ul class="item"><span>Item 1</span></ul>
    <ul class="item"><span>Item 2</span></ul>
</ul>
<ul class="group" data-id='abc'> <span>Group 2</span>
    <ul class="item"><span>Item 3</span></ul>
    <ul class="item"><span>Item 4</span></ul>
</ul>
<hr>
<div></div>

的jQuery / JS：

// When changing INPUT:TEXT then update the UL>SPAN text based on the "data-id" attribute
$(document).on("change", "input", function () {
    var group = $(this).val();
    var id = $(this).data("id");
    $("ul[data-id='" + id + "'] span:first").text(group);
});

// When changing either INPUT:TEXT or SELECT then update the list of assocuated groups
$(document).on("change", "select, input", function () {

    // Empty the debug DIV text
    $("div").text("");

    // Show all options from the first SELECT
    $("select:first option").each(function () {
        var txtOptionAvailable = $(this).text();

        $("div").append("<p><strong>" + txtOptionAvailable + "</strong></p>");

        // Show all groups
        $(".group > span").each(function () {
            var txtGroup = $(this).text();
            $("div").append("<p>Processing " + txtGroup + "</p>");

            $("input[value='" + txtGroup + "']").next().find("option:selected").each(function () {

                var txtOptionSelected = $(this).text();

                // If the "available option" matches the "selected option"
                if (txtOptionAvailable == txtOptionSelected) {
                    $("div").append("<p>" + txtGroup + " has selected " + txtOptionSelected + "</p>");
                }
            });
        });
    });
});

谁能看到我做错了什么？

Answer 1

@ CBroe - 你的回答让我看到了这一点，我发现我只能在我的选择器中使用filter方法：

旧字符串：

$("input[value='" + txtGroup + "']").next().find("option:selected")...

新字符串：

$("input").filter(function() { return $(this).val() === txtGroup }).next().find("option:selected")...

这个问题/答案对我来说是真正的发现，jQuery 1.9.1 property selector

请参阅新的JSFiddle demo。

Answer 2

您的错误在于：input[value='new'] - 属性选择器仅适用于给定的值（通常在HTML代码中）最初。

将使用value="old"创建的输入字段的值动态更改为new将不以属性选择器识别的方式更改它。

阅读http://api.jquery.com/prop/关于属性与属性之间区别的内容，这应该让它更清晰。

Answer 3

请参阅： DEMO

将文本框的值分配给新属性（此处为data-val）并将其用于过滤（$("input[data-val='" + txtGroup + "']")）...

$(document).ready(function(){
   $("input").each(function() {
     $(this).attr('data-val', this.value);
   });
});

// When changing INPUT:TEXT then update the UL>SPAN text based on the "data-id" attribute
$(document).on("change", "input", function () {
  var group = $(this).val();
  var id = $(this).data("id");
  $(this).attr('data-val', group);
  $("ul[data-id='" + id + "'] span:first").text(group);
});

// When changing either INPUT:TEXT or SELECT then update the list of assocuated groups
$(document).on("change", "select, input", function () {

// Empty the debug DIV text
$("div").text("");

// Show all options from the first SELECT
$("select:first option").each(function () {
    var txtOptionAvailable = $(this).text();

    $("div").append("<p><strong>" + txtOptionAvailable + "</strong></p>");

    // Show all groups
    $(".group > span").each(function () {
        var txtGroup = $(this).text();

        $("input[data-val='" + txtGroup + "']").next().find("option:selected").each(function () {

            var txtOptionSelected = $(this).text();

            // If the "available option" matches the "selected option"
            if (txtOptionAvailable == txtOptionSelected) {
                $("div").append("<p>" + txtGroup + " has selected " + txtOptionSelected + "</p>");
            }
        });
    });
 });
});

<强>更新：

请参阅CBroe's Answer了解您的代码无效的原因..

更新动态插入的元素时，它无法看到其值

3 个答案: