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（）函数做了什么坏事吗？

感谢您的帮助。

---- ---- EDIT
谢谢大家，我想在我的问题中添加一些东西。我已经尝试过你的建议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()返回的值现在直接引用您创建的输入，而不是从头开始搜索文档。

Answer 3

尝试给列表一个id：

<ul id='myul'></ul>

然后

$('#myul').append(...

Answer 4

嗯，它应该找到它......试着让它“呼吸”......

append_list();
setTimeout(find_input, 1);

Answer 5

看起来在UI更改完成之前，console.log正在运行，这就是为什么它没有找到添加的元素。如果使用setTimout，延迟1毫秒将强制执行以下代码，直到UI更改完成，然后应该给出正确的结果。

append_list();
setTimeout(function() {
  console.log($('input'));
  find_input();
}, 1);

jQuery找不到刚刚发生的html元素

5 个答案: