Question

好的，我有这个HTML：

<td class="text-left"><button type="button" onclick="addImage('<?php echo $language['language_id']; ?>');" data-toggle="tooltip" title="<?php echo $button_banner_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>

点击后我调用JS函数addImage。

<script type="text/javascript">
function addImage(language_id) {
html = '<td class="text-left"><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-2 control-label" for="date-ended"><?php echo 'Date Started' ?></label><div class="input-group date" id="datetimepicker1"><input name="background_images_date_ended" type="text" id="date-ended" class="form-control" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div></div></td>';

$('#images' + language_id + ' tbody').append(html);
</script>

之后我想调用此div <div class="input-group date" id="datetimepicker1">

上的函数

此功能：

<script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
  });
</script>

但是这个div是动态添加的，我不知道，但是函数没有运行。

Answer 1

为什么你不在addImage函数的底部初始化datetimepicker，或从那里调用另一个函数？

function addImage(language_id) {
        html = '  <td class="text-left"><div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-2 control-label" for="date-ended"><?php echo 'Date Started' ?></label><div class="input-group date" id="datetimepicker1"><input name="background_images_date_ended" type="text" id="date-ended" class="form-control" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div></div></td>';

$('#images' + language_id + ' tbody').append(html);
$('#datetimepicker1').datetimepicker();
}

或

function addImage(language_id) {
  ....
  initDatepicker();
}

function initDatepicker () {
    $('#datetimepicker1').datetimepicker();
}

Answer 2

对于动态添加的元素，您必须使用如下事件处理程序：

someElement.addEventListener( "click", function() { 
       //some code to run on click
});

这应该对你有用

当动态添加内容时，JS无法调用函数

2 个答案: