У меня есть кнопка на странице. Вот код.
var button = "<button title = " + obj.hostname + ", " + gpu.toUpperCase() +
// " data-content = \"" + img1 + "\"" +
" data-id=\"" + detailed_summary + "\"" +
" data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ": " + display_val + "\"" +
" class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
" data-toggle=\"modal\" " +
" rel=\"popover\" " +
" data-target=\"#hostInfo\" " +
" href=\"#infoModal\"></button>";
Когда я пытаюсь использовать этот код jQuery, он не работает.
$("button.btn").on("mouseenter", function(event){
event.preventDefault();
event.stopPropagation();
console.log("MouseEnter");
});
Я изменил селектор на .btn
, gpu
, btn-lg
, open-InfoModal
. Но это не сработает. Я также попытался изменить mouseover
, hover
.Но Когда я изменяю селектор li
, то он работает.
Есть 180 кнопок, завернутых в один li
. Я не хочу, чтобы результат работал с li
Есть идеи?
То, что вы показали выше, - это разметка кнопки в переменной. Вы не указали нам, действительно ли вы добавляете разметку в DOM, и если да, то в отношении привязки события.
Если вы добавляете кнопку в DOM после привязки события:
$( document.body ).append( button ); //for example
Затем вам необходимо связать событие следующим образом (делегирование событий):
$(function() {
$(document).on("mouseenter","button.btn", function(event){
event.preventDefault();
event.stopPropagation();
console.log("MouseEnter");
});
});