创建后立即访问元素(没有setTimeout)

时间:2013-03-01 19:58:43

标签: javascript jquery timeout

我试图寻找答案,但我的措辞与使用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来确保在选择元素并添加内容,事件等之前已创建元素...

我的问题很简单,有更好的方法吗?没有超时?

请注意我不是故意的,是否有更好的方法来编写上面的确切代码?我只是想知道是否有办法避免因指定的原因使用超时

5 个答案:

答案 0 :(得分:2)

这可能会有所帮助。

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

这对我有用jsFiddle

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

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

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

答案 3 :(得分:0)

我将在一行中执行此操作:http://fiddle.jshell.net/4rT6s/1/

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

答案 4 :(得分:0)

我认为你可以通过一点点黑客来链接这些方法来让孩子们刚刚创建:

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

它很难看,但似乎有效,我不确定它是否可以根据您的需求进行扩展