jQuery。如何选择实时创建的元素？答案

【问题标题】：jQuery. How do I select live created element?jQuery。如何选择实时创建的元素？
【发布时间】：2018-02-06 01:24:36
【问题描述】：

代码如下：

    helpers.ajaxModuleFormRequest('blockcallback', $(this), function() {
        var timer = $('[data-timer]');
        var seconds = timer.data('timer');

        var interval = setInterval(function() {
            if (seconds == 0) {
                clearInterval(interval);
            }
            timer.text(seconds);
            seconds--;
        }, 1000);
    });

helper.ajaxModuleFormRequest() 执行 AJAX 请求，然后在 $.ajax.done() 方法中调用第三个参数中指定的回调函数。

<div data-timer="20"></div> 被插入到 DOM live $.ajax.done() 方法中，我想选择它来启动计时器。但是代码不起作用，$('[data-timer]').length 返回 0。我该如何解决这个问题？

【问题讨论】：

类似问题selector for dynamic elements
要了解这个问题，我们需要了解更多关于您如何操作 div 的信息。我已经从您的代码中创建了a jsfiddle，它工作正常。
页面加载时 DOM 中没有 div。它在 AJAX 请求之后插入到 DOM 中。

标签： javascript jquery html ajax

【解决方案1】：

这是一个简化的例子，它动态插入一个<div>，然后启动计时器：

HTML：

<html>
<head>Testpage</head>
<body></body>
</html>

JavaScript：

{
    $('body').append('<div data-timer="20"></div>');
    var timer = $('[data-timer]');
    var seconds = timer.data('timer');
    if (seconds!==undefined)
    {
        alert(seconds);
        var interval = setInterval(function() {
            if (seconds == 0) {
                alert('elapsed!');
                clearInterval(interval);
            }
            timer.text(seconds);
            seconds--;
        }, 1000);
    }
    else
    {
        alert("Please specify a timer value!");
    }
}

请注意，最初<div> 不存在，它是通过动态插入的

$('body').append('<div data-timer="20"></div>');

如果你想测试它是否正确测试计时器值的存在，请注释上面的行，即

// $('body').append('<div data-timer="20"></div>');

您会收到警告消息“请指定计时器值！”。

在 jsfiddle 上试试：

jsfiddle

{
    $('body').append('<div data-timer="20"></div>');
    var timer = $('[data-timer]');
    var seconds = timer.data('timer');
    if (seconds!==undefined)
    {
        alert(seconds);
        var interval = setInterval(function() {
            if (seconds == 0) {
                alert('elapsed!');
                clearInterval(interval);
            }
            timer.text(seconds);
            seconds--;
        }, 1000);
    }
    else
    {
        alert("Please specify a timer value!");
    }
}

<head>Testpage</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：