创建后立即访问元素（没有 setTimeout）[关闭]答案

【问题标题】：Accessing element immediately after creation (without setTimeout) [closed]创建后立即访问元素（没有 setTimeout）[关闭]
【发布时间】：2013-03-01 19:58:42
【问题描述】：

我试图寻找答案，但我的措辞与使用 jQuery on() 方法寻找事件委托的问题太相似了。因此，请不要对我的问题的措辞感到困惑。

鉴于我编写 jQuery 应用程序的经验，我真的问这个问题我感到很惭愧，但我必须承认我实际上并不知道这个问题的答案:-(

考虑一下：

// Create the div
$('#wrapper').prepend('<div id="test"></div>');

// Add content to the div, and attach events
// Only execute it once the div has been created though, so wait 20 milliseconds
setTimeout(function(){

    // Add some button
    $('#test').html('<button></button>');

    // Add an event to the button
    // ... after 20 milliseconds
    setTimeout(function(){

        // Attach the click event
        $('#test button').click('dosomething');
    });
},20);

在上面的代码中，我必须使用setTimeout 来确保在选择元素并添加内容、事件等之前已经创建了元素...

我的问题很简单，有没有更好的方法来做到这一点？没有超时？

请注意，我不是说，有没有更好的方法来编写上面的确切代码？我只是想知道是否有办法避免由于指定的原因而使用超时.

【问题讨论】：

“我必须使用setTimeout 来确保在选择元素并添加内容、事件等之前已创建该元素...” 不，你不需要. jsfiddle.net/LVH7w
可能我不明白中间创建的需要什么，为什么不能用on？
@thesystem 有趣的是，这就是我最初编写代码的方式，但它不起作用！它仅在我插入超时后才起作用。这就是为什么我这么糊涂！！！ :-(
添加新的子元素或 HTML 是同步操作，所以不需要任何超时。
@thesystem 好的，我会尽力而为。我的应用程序很大，这只是一个小sn-p。可能需要一些时间来创建一个有效的 jsFiddle。感谢您一直以来的帮助。我很高兴您同意不需要超时...

标签： javascript jquery timeout

【解决方案1】：

这可能会有所帮助。

 var _b = $('<button></button>');
    $('#wrapper').prepend(_b);
    _b.click(function(){
     ///do something
    });

【讨论】：

不需要</button>，jQuery会为你创建元素只需要$('<button>')
感谢您的帮助，当我能够在 jsFiddle 中重新创建确切的问题时，我会回来。它现在似乎正在工作，不明白为什么，因为它以前肯定没有......

【解决方案2】：

假设添加代码时 DOM 上存在包装器尝试：

$('#wrapper').on('click', '#test button', doSomething)

【讨论】：

请阅读问题，我不是在寻找事件委托。我很清楚如何做到这一点！
如果你不需要事件委托，你需要什么？聆听 DOM 的变化？你对此有什么想法：stackoverflow.com/questions/9488653/…

【解决方案3】：

这对我有用jsFiddle

var $test = $('<div id="test"></div>');
  , $button = $('<button></button>')
$test.append($button);

$button.click(function() {
  console.log('here');
});

$('#wrapper').prepend($test);

【讨论】：

感谢您的帮助，当我能够在 jsFiddle 中重新创建确切的问题时，我会回来。它现在似乎正在工作，不明白为什么，因为它以前肯定没有......

【解决方案4】：

我将在一行中这样做：http://fiddle.jshell.net/4rT6s/1/

$(function(){
    $('<button type="button">Click!</button>').click(function(){alert('click');}).appendTo($('<div id="test" />').appendTo('#wrapper'));
});

【讨论】：

感谢您的帮助，当我能够在 jsFiddle 中重新创建确切的问题时，我会回来。它现在似乎正在工作，不明白为什么，因为它以前肯定没有......

【解决方案5】：

我认为您可以通过一些小技巧将这些方法链接起来以获取刚刚创建的孩子：

$('#wrapper').prepend('<div id="test"></div>').children('#test').html('<button></button>').children('button').click('dosomething');

它很丑，但它似乎可以工作，我不确定它是否可以根据您的需要进行扩展

【讨论】：

感谢您的帮助，当我能够在 jsFiddle 中重新创建确切的问题时，我会回来。它现在似乎正在工作，不明白为什么，因为它以前肯定没有......