Как добавить html в элемент страницы из события HTML onClick?

Question

Я пытаюсь настроить возможность динамического создания всплывающих подсказок всплывающих подсказок, когда пользователь нажимает на определенный элемент (значок значка вопроса). Эти всплывающие подсказки будут абсолютно позиционированы относительно значка, который был нажат. Из-за характера сайта/информации я решил, что мне бы хотелось вызвать функцию javascript, используя событие onClick в html, а затем передав ему несколько параметров.

Однако я новичок в этом развитии, и у меня возникают проблемы с тем, чтобы это работало. У меня есть все html и css на месте и оформлены соответствующим образом, но ничего не происходит «на клике». Я не получаю никаких консольных ошибок, но не кажется, что html добавляется правильно, и я не могу определить причину.

Вот код, который я собрал.

Javascript/JQuery:

function createTooltip(h4, p) { 
    $(this).next('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>'); 
}; 

HTML:

<a class="tooltip" onClick="createTooltip('Test Tooltip', 'blah blah blah blah blah blah blah blah blah')"><div class="dialog-anchor"></div></a> 

Любое понимание или помощь будет высоко оценена. Я все еще участвую в учебе и получаю много пользы от того, чтобы мои ошибки указывали.

Спасибо заранее!

Answer 1

Поскольку вы используете JQuery, как насчет сделать его использование это слушателей и добавлять атрибуты данных HTML?

<a class="tooltip" data-h4="Test Tooltip" data-p="blah blah blah blah blah blah blah blah blah"> 
    <div class="dialog-anchor">ANCHOR</div> 
</a> 

Одно дело, что это неправильно, а также: $(this).next('.dialog-anchor') - .dialog-anchor является потомком .tooltip. next() используется, когда это братья и сестры, а не дети. Вместо этого используйте find.

$(function() { //jquery document.ready 
    $('a.tooltip').on('click', function (e) { 
     var $this = $(this); 
     e.preventDefault(); 

     //dialog-anchor is a child of tooltip. NEXT is used when it's siblings 
     $this.find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>' + $this.data('h4') + '</h4><p>' + $this.data('h4') + '</p></div><div class="bg"></div></div>'); 
    }); 
}); 

http://jsfiddle.net/dg1t4f8c/3/

Answer 2

Вы должны передать this в качестве аргумента функции. Атрибут HTML должен быть:

onClick="createTooltip(this, 'Test Tooltip', 'blah blah blah blah blah blah blah blah blah')" 

И JQuery должен использовать .find(), не .next(), потому что .dialog-anchor элемент находится внутри якоря, а не после него.

function createTooltip(elem, h4, p) { 
    $(elem).find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>'); 
} 

DEMO

Вы бы использовать .next() если HTML были такими:

<a>something</a><div class="dialog-anchor"></div>