Jquery` .find()`找不到带有value =的`document``input`

Question

我有一个按钮,我将输入附加到HTML DOM.
稍后我有一个按钮来获取输入值,如果它们与关键字匹配.
在这个例子中"a".

HTML

<button class="btn btn-info" id="btnAddInput">Add input</button>
<button class="btn btn-info" id="fetchValue">Fetch value</button>
<div id="inputs"></div>

JS

$('#btnAddInput').on('click', function() {
  $('#inputs').append('<input type="text" class="myInput"><br>');
  });
$('#fetchValue').on('click', function() {
  var value = $(document).find('input[value="a"]');
  console.log(value);
});

小提琴:https://jsfiddle.net/Ljrkdm53/

我了解到,如果使用Jquery将DOM添加到DOM,有时您必须使用documentas选择器来查找元素.
但在这种情况下我没有成功.

您添加的输入是在我的代码中保存到mysql中.
如果您在开始时加载所有已保存的输入,则js代码会查找值.

那么,我错过了什么？

Answer 1

你混淆了value与输入相关的各种东西.你并不是唯一的一个!

• 该value 属性指定输入的初始值.当输入的值发生变化时它不会改变,因此你附加了一个没有value属性的输入,然后输入它,它就不会突然得到一个值属性 - 所以你不能用它来搜索它.

• 实例上的value 属性HTMLInputElement反映了输入的当前值.

• 还有defaultValue属性,它反映了value属性.

如果你需要根据它的当前值找到一个输入,没有CSS选择器可以做到这一点,你需要使用更广泛的搜索和filter:

var inputsWithA = $("input").filter(function() {
    return this.value == "a";
});

这是一个快速示例,显示输入的value属性,defaultValue属性和value属性的值:

$("button").on("click", function() {
  var input = $("input");
  msg("The input's <code>value</code> property is: '" + input.val() + "'");
  msg("The input's <code>defaultValue</code> property is: '" + input.prop("defaultValue") + "'");
  msg("The input's <code>value</code> <strong>attribute</strong> is: '" + input.attr("value") + "'");
  
  msg("We can only use CSS with the attribute, so for instance <code>$('input[value=\"original\"]')</code> will find it but <code>$('input[value=\"" + input.val() + "\"]')</code> will not:");
  msg("<code>$('input[value=\"original\"]')</code> found it? " +
      ($('input[value="original"]').length ? "Yes" : "No")
  );
  msg("<code>$('input[value=\"" + input.val() + "\"]')</code> found it? " +
      ($('input[value="' + input.val() + '"]').length ? "Yes" : "No")
  );
});
function msg(html) {
  $("<p>").html(html).appendTo(document.body);
}

<p>Type something in the input, then click the button:</p>
<input type="text" value="original">
<button type="button">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果我运行它并在单击按钮之前将输入值更改为"已更新",我会得到:

输入的value属性是:'updated'

输入的defaultValue属性是:'original'

输入的value 属性是:'original'

我们只能使用带有属性的CSS,所以例如$('input[value="original"]')会找到但$('input[value="updated"]')不会:

$('input[value="original"]')找到了？是

$('input[value="updated"]')找到了？没有