× добавлено из JavaScript не кликабелен?

Question

Я добавил HTML-контент из JavaScript следующим образом:

var response = { message: "sample messsage" };

$('#main-content').append(
    '<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+response.message+
    '</div>'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main-content"></div>

Добавление HTML-кода работает правильно, но закрытие X не работает.Я смотрел везде, но до сих пор не нашел решения.

Любые предложения приветствуются.

Answer 1

Не уверен, что это то, что вы ожидаете.Но для того, чтобы что-то было кликабельно, вам нужно добавить onclick="clickevent()"

Также вам нужно добавить function в ответ на onclick, что на clickevent() в показанном примере:

function clickevent() {
    $('#main-content').html('<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+
    '</div>'
);
}

Обратите внимание, что .html устанавливает элемент html для выбранного, который в примере был $('#main-content').

См. Следующий фрагмент:

var response = { message: "sample messsage" };

$('#main-content').append(
    '<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+response.message+
    '</div>'
);

function clickevent() {
    $('#main-content').html('<div class="alert alert-danger alert-dismissable">'+
    '<button type="button" class="close" data-dismiss=alert">'+
    '<span aria-hidden="true">&times;</span>'+
    '<span class="sr-only">Close</span>'+
    '</button>'+
    '</div>'
);
}

.alert{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main-content" onclick="clickevent()"></div>

См. onclick() и разницу между .click() с .onclick() для получения дополнительной информации.Информация.

Answer 2

Это потому, что файл js загружается до того, как вы добавите свои элементы в файл html.Вы можете добавить элементы в ваш HTML-файл и .hide () их в начале.Когда они вам нужны, просто .show () элементы.