Question

以下是代码：

    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（）方法中调用第三个参数中指定的回调函数。

在DOM live $ .ajax.done（）方法中插入了

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

Answer 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>');

并且您将收到提示消息＆＃34;请指定计时器值！＆＃34;。

在jsfiddle上试试：

jsfiddle

＆＃13;

{
    $('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!");
    }
}

＆＃13;

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

＆＃13;

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

1 个答案: