HTML-элемент, добавленный в DOM в виде строки
У меня есть jsFiddle, чтобы продемонстрировать проблему:
https://jsfiddle.net/mbwu3ap7/2/
Итог, хочу добавить кнопку на ввод при входе мышки.
Вот мой HTML:
<input type = "text" class = "form-control guidInput"/>
вот мой jQuery:
$(document).on("mouseenter",
".guidInput",
function(e) {
this.after('<button id = "fooBar">add user</button>');
});
Я хочу добавить кнопку в DOM, вместо этого я добавляю строку с двойными кавычками:
Примечания: я использую «on», так как ввод будет динамически добавляться в DOM после отображения страницы.
Попробуйте обернуть его в объект jQuery: this.after($('<button id = "fooBar">add user</button>')); Я не уверен на 100%, давно не работал с jQuery.
this — это узел DOM, а не объект jQuery, поэтому вы используете Element.after(), а не $.after()... так что вы хотите $(this).after() вместо этого, хотя вы уверены, что хотите добавить новый элемент <button>каждый раз, когда вы наводите указатель мыши на ввод?
@Phil, твое решение только для CSS хорошее. Просто нужна обертка, чтобы кнопка не исчезала - я взял на себя смелость ее настроить: jsfiddle.net/umfhvwcp
@freedomn-m спасибо, но OP, похоже, хочет, чтобы кнопка оставалась, после чего CSS не работает
Ответы 1
Редактировать: Спасибо за комментарии и подсказки.
Просто оберните «это» в селектор jquery, и он будет работать так, как ожидалось:
https://jsfiddle.net/q85pfmex/
function(e) {
$(this).after('<button id = "fooBar">add user</button>');
});
Это то, что вы ищете? jsfiddle.net/x6k0fyjb