Question

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

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

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

Answer 1

这可能会有所帮助。

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

Answer 2

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

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

Answer 3

这对我有用jsFiddle

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

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

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

Answer 4

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

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

Answer 5

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

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

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

创建后立即访问元素（没有setTimeout）

5 个答案: