Как вызвать пользовательскую функцию jQuery из атрибутов onclick HTML?

Question

На самом деле я хочу вызвать функцию, которая является функцией поп-функции jQuery, из атрибутов onclick, определенных в тегах HTML-тегов. Я не могу добиться успеха.

Мой сценарий:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#popoverId').popover({ 
     html: true, 
     title: 'Popover Title <a class="close" href="#");">&times;</a>', 
     content: '<div class="msg">Your Text Here</div>', 
    }); 

    $('#popoverId').click(function (e) { 
     e.stopPropagation(); 
    }); 

    $(document).click(function (e) { 
     if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) { 
      $('#popoverId').popover('hide'); 
     } 
    }); 


    }); 

</script> 

Я хочу, чтобы запустить этот код через onlick событие HTML

Мой HTML-код:

<input type="submit" id="popoverId" class="btn btn-large btn-danger" onclick="myfunction()" /> 

На самом деле я хочу, чтобы отобразить поповер когда Я нажимаю эту кнопку, но не из идентификатора кнопки. Я хочу отобразить popover, когда функция вызывается из события onclick HTML как JavaScript.

Answer 1

Я скопировал ваш код в скрипку и осмотрел исход. Здесь я воссоздал эффект. Это не лучший способ открыть/закрыть поповер, но, возможно, это будет в отелях ...

fakePopover = function() { 
 
    if (document.getElementById("popover474618")) { 
 
     document.getElementById("popover474618").parentNode.removeChild(document.getElementById("popover474618")); 
 
    } else { 
 
     document.getElementsByTagName("body")[0].innerHTML += "<div class=\"popover fade right in\" role=\"tooltip\" id=\"popover474618\" style=\"top: 100px; left: 160px; display: block;position:relative;\"><div class=\"arrow\" style=\"top: 31.0344827586207%;\"></div><h3 class=\"popover-title\">Popover Title <a class=\"close\" href=\"#\");\"=\"\">×</a></h3><div class=\"popover-content\"><div class=\"msg\">Your Text Here</div></div></div>"; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" style="position:absolute; left: 100px; top:100px;background-color:gray;"> 
 
<input type="submit" id="popoverId" class="btn btn-large btn-danger" onclick="fakePopover()" /> 
 
</div>

Это плохая идея, потому что вы будете иметь сначала установить верхние и левые настройки fakePopover, имея код для этого. Чтобы избежать каких-либо проблем, вы можете поместить элементы в div (как в примере) с position:absolute.

Обратите внимание, что это не закрывается, если вы не нажмете ту же кнопку, с которой вы открыли popover. Вам понадобится дополнительный JavaScript (/ jQuery), чтобы сохранить ту же функциональность, что и раньше.