2015-05-29 83 views
0

其實我想從HTML按鈕標籤中定義的onclick屬性中調用一個函數,它是一個jQuery的彈出函數。我無法成功。如何從HTML的onclick屬性調用jQuery自定義函數?

我的腳本是:

<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> 

我想通過HTML點擊數事件來運行該代碼

我的HTML代碼:

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

其實我想要顯示的酥料餅的時候我點擊該按鈕,但不是從按鈕ID。我想在JavaScript的onclick事件中調用該函數時顯示彈出窗口。

+0

你可以嘗試手動觸發。但也需要附加在選擇器上。 –

回答

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>

這是一個壞主意,因爲你有在代碼已經完成的情況下自行設置虛擬便箋的頂部和左側設置。爲了避免一些麻煩,你可能想把元素放在一個div中(如我在示例中)與position:absolute

請注意,除非您單擊用於打開彈出式窗口的相同按鈕,否則此操作不會關閉。你需要一些額外的JavaScript(/ jQuery)來保留你以前的功能。

相關問題