javascript 在 dom 更新后不起作用

Question

我得到一个使用 ajax/json 和车把更新其内容的网页。现在我想在我的日期字段中使用 bootstrap-datepicker，但是在使用把手更新 DOM 之后，javascript 事件不起作用。

我的javascript

$(function(){
var refresher = function () {
    $.getJSON( "{% url 'characters:journal_json' 1 %}", function(obj) {
        refresh_timer = obj.refresh_timer * 1000;
        setTimeout(refresher, refresh_timer);
        if (obj.content) {
            // do shit with content and data
            var source   = $("#JournalTemplate").html();
            var template = Handlebars.compile(source);
            var html    = template(obj.content);
            $("#JournalContent").replaceWith(html);
        }
    });
  };
  setTimeout(refresher, 300); // 0.3 seconds
});

$('.datepicker').datepicker({
    format: "mm-dd-yyyy",
    autoclose: true
});

Handlebars模板（我解决这个问题后会展开）：

<form class="form-inline" action="" method="GET" id="FilterForm">
    <input class="form-control input-sm datepicker" id="id_end_date" name="end_date" type="text" value="05-26-2015" />
<button type="submit" class="btn btn-primary btn-sm">Filter</button>
</form>

Answer 1

试试这个方法：

$('body').on('focus', '.datepicker', function () {
    $(this).datepicker({
        format: "mm-dd-yyyy",
        autoclose: true
    });
});

使用 on 也会为动态元素触发事件

Answer 2

首先bootstrap使用jQuery，所以请确认您将jQuery脚本放在bootstrap.js之前。之后在标签内编写您自己的脚本，然后是自执行/匿名函数，在 JavaScript 中称为 IIFE（立即调用函数表达式）。因此，这是始终编写脚本的好方法。请尝试以下方法。

(function(){

----- Your Code ----

})();

你肯定会摆脱所有这些。谢谢。

Answer 3

我做了个小动作，请试试这个，

$(function(){
var refresher = function () {
    $.getJSON( "{% url 'characters:journal_json' 1 %}", function(obj) {
        refresh_timer = obj.refresh_timer * 1000;
        setTimeout(refresher, refresh_timer);
        if (obj.content) {
            // do shit with content and data
            var source   = $("#JournalTemplate").html();
            var template = Handlebars.compile(source);
            var html    = template(obj.content);
            $("#JournalContent").replaceWith(html);

            bindDatepicker(); // *** Here I am binding again...
        }
    });
  };
  setTimeout(refresher, 300); // 0.3 seconds
});

function bindDatepicker() {
  $('.datepicker').datepicker({
     format: "mm-dd-yyyy",
     autoclose: true
  });
}

每次更新 HTML 时，此代码都会绑定 datepicker。希望对你有帮助。

javascript 在 dom 更新后不起作用

javascript does not function after dom is updated

javascript

handlebars.js