jQuery 找不到刚刚添加的 html 元素

Question

我有以下 html 代码：

<div id='list'>
  <ul></ul>
</div>

我有以下 jQuery 脚本：

function append_list(){
  $('ul').append('<li><input type="image" name="original" value="'+SOMEVALUE+'"></li>');
}

function find_input(){
  //some code to find the just appended input element.
}

$(document).ready(function(){
  append_list();
  console.log($('input'));
  find_input();
});

当我查看浏览器控制台时，console.log 的输出只是一个空数组“[]”，但是如果我输入 console.log($('input'));页面加载后在我的浏览器控制台中，它可以反馈正确的数据... 我对 .append() 函数做了什么坏事吗？

感谢您的帮助。

----编辑----
谢谢大家，我想在我的问题中添加一些内容。 我已经尝试过你对 setTimeout(); 的建议；但仍然找不到我附加的输入元素。 我也将console.log($('input)); 添加到function append_list(); 中也没有帮助...现在我在这里堆叠:-(

Answer 1

你应该设置一个回调函数。

查看：http://jsfiddle.net/bryandowning/4mS9L/

function append_list(someval, callback){

    //save a reference to the element you are appending
    var $element = $('<li><input type="text" name="original" value="'+someval+'"></li>');

    //append it to the list
    $('ul').append($element);

    //if a callback function was provided, execute it.        
    if(arguments.length === 2){
        //pass the callback function the saved reference to the appended element
        callback($element);   
    }
}

//this is the callback function
function find_input(item){
    var $input = item.find("input");

    $input.after("The value of the input element is: " + $input.val());
}

$(document).ready(function(){
    //example with the callback provided
    append_list("First Element", find_input);

    //example without the callback provided
    append_list("Second Element");

});

Answer 2

我觉得奇怪的是 append_list() 没有在 console.log 之前完成......这是一些人的建议，但我很难找到另一个原因。

但是，您可以保证引用您的输入，如下所示：

function append_list() {
   return $('<li><input type="image" name="original" value="'+SOMEVALUE+'"></li>')
      .appendTo('ul')
      .find('input');
}

append_list() 返回的值现在直接引用您创建的输入，而不是从头开始搜索文档。