如何在链接上附加onclick事件以使用javascript功能

我在我的管理面板中使用bootstrap 2（我知道已发布版本3）创建了一个编辑按钮，其代码为：

<a data-toggle="tooltip" id="my-button" title="Edit" class="btn btn-success" style="margin-left:10px;"><i class="icon-pencil"></i> </a>

我试着创建一个javascript函数，然后在里面调用它，但它不起作用。所以，请您帮助我如何在这里绑定onclick事件？任何建议都会很有帮助。多谢各位

(function($) {
    $(function() {
        $('#my-button').click(function(e) {
            $('#element_to_pop_up').bPopup({
                appendTo: 'form',
                zIndex: 8,
                easing: 'easeOutBack',
                speed: 450,
                transition: 'slideDown'
            });
            return false;
        });
    });
})(jQuery);    

此外，还应在a标记中添加“href=”#“”。如果缺少“href”，某些浏览器无法正确呈现标记

<a data-toggle="tooltip" id="my-button" href='#' title="Edit" class="btn btn-success" style="margin-left:10px;"><i class="icon-pencil"></i> </a>

---

由于您使用的是锚定标记，为了安全起见，您应该添加

href=“#”

。我将通过以下方式使javascript更加简单：

$('document').ready(function(){
           $('#my-button').on('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup({
                appendTo: 'form'
                , zIndex: 8
                ,easing: 'easeOutBack'
                ,speed: 450
                ,transition: 'slideDown'
             });
            return false; });
});

---

正如其他人指出的那样，代码确实有效。你可能有其他冲突的事情。如果你能提供一个到实时代码的链接，那就最好了

我有一个工作的例子

JavaScript部分不应放在另一个函数中。不确定这是不是你的本意

我尝试创建一个javascript函数，然后在其中调用它

测试工作示例

$（文档）.ready（函数（）{
$（“#我的按钮”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（“#元素”到“弹出”）.bPopup({
附录：'表格'，
zIndex:8，
放松：“轻松内地”，
速度：450，
过渡：“滑动向下”
});
返回false；
});
});
/*
*请勿复制此部分。它只是bPopUp库的源文件
*/
/*********************************************************************************
*@name:bPopup
*@作者：（c）比约恩·克林加德(http://dinbror.dk/bpopup - twitter@bklinggaard)
*@version:0.7.0.min
*********************************************************************************/
功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（a.开放开放开放）功能（a.开放开放开放）和a.开放开放开放。电话（c）c）k=（e.数据（BPopopp）的（b）数据（BPopopopopopopopp）是）的（b）功能（b）b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能（b）功能）功能（b）功能）功能）高度：“100%”，左：0，不透明度：0，位置：“固定”，顶部：0，宽度：“100%”，“z-index”：a.zIndex+k}）。每个（函数（{a.appending&&b（this）。appendTo（a.appendTo）}）。动画（{opacity:a.opacity}，a.fadeSpeed）；（c.data（“bPopup”，a.data（“id”，d）。css（{left:！a.follow[0]&&m| i？g:h.scroll（），位置：a.positionStyle |绝对），顶部：| follow[1]；[f]：a.zIndex+k+1}）.each（function（）{a.appending&&b（this.appendTo）（a.appendTo）；if（null！=a.loadUrl）开关（a.contentContainer=b（a.contentContainer | | c），a.content）{case“iframe”：b（“”）.attr（src），a.loadUrl.appendTo（a.contentContainer）；break；默认值：a.contentContainer.load（a.loadUrl）}.fadeIn（a.fadeSpeed，function（）{b.isFunction（p）&&p.call）（c）}）函数o（）{a.modal&&b（“.bModal.”+c.data（“id”））.fadeOut（a.fadeSpeed，函数（）{b（this.remove（）））；c.stop（）.fadeOut（a.fadeSpeed，函数（）{null！=a.loadUrl&&a.contentContainer.empty（））；e.data（“bPopup”，0d？20:d]}函数s（）{返回e.height（）>c.outerHeight（！0）+20&&e.width（）>c.outerWidth（！0）+20}）b.isp=n=n=extend n；{，b.fn.bPopup.defaults，n）；a.scrollBar | | b（“html”）.css（“溢出”、“隐藏”）；var c=this，h=b（文档），e=b（窗口），k，d，q，l，m，i，j，f，g；this.close=function（）{a=c.data（“bPopup”）；o（）}；返回这个。each（函数（）{c.data（“bPopup”）| | t（）}；b.fn.bPopup.defaults={amsl:50，追加：！0，在“closebody”后面：“ajax”类内容：“ajax”，contentContainer:null，esclose:！0，fadeSpeed:250，followSpeed:[！0，！0]，followSpeed:500，loadUrl:null，model:！0，modalClose:！0，modalColor:#000，onClose:null，onOpen:null，不透明度：0.7，位置：[自动”，“自动”]，位置样式：“绝对”，滚动条：！0，zIndex:9997}）（jQuery）；

#元素到元素弹出{
背景色：#fff；
边界半径：15px；
颜色：#000；
显示：无；
填充：20px；
最小宽度：400px；
最小高度：180px；
}

弹出它

我得到了我的解决方案，因为问题是在调用Jquery库的顺序中。我只需要重新排列被调用库的顺序。但是，感谢您的所有建议。

您得到了什么错误？我没有得到任何错误，我的代码没有给出任何输出。我尝试使用Inspect元素，控制台选项卡上的任何错误，但dint看到了任何错误。事实上，如果我们可以在skype上讨论它，对解决问题会更好。请在用英语写作时使用英语标点。@sawa:你只是一个白痴，在stackoverflow上否决我的所有问题，只是为了降低我的声誉。孩子，长大后，你需要一些良好的心理治疗。请在用英语写作时使用英文标点符号。$（'document'）。ready不起作用，应该作为$（document）完成。ready或者更好，只是$（function（）{}）；@ChrisPietschmann的简写并不重要。我一直在使用$（'document'）为了我的一生。无论如何，感谢你的速记，我按照你的建议做了，但仍然没有结果。如果你能看到我的代码，以便更好地理解，那会更好。先生，在研究了你的示例之后，我实现了相应的功能，但现在它给出的错误是“$（…）。bPopup不是一个函数”，现在感觉非常无助。这意味着您可能没有包含bPopup库。它正在尝试引用

bPopup（）

，但它找不到它的存在。您下载了库并将其包含在该页面上了吗？是的，先生。当然我已经包含了bpopup库。先生，还有一件事，您用表单包围了锚定标记。但我的代码不是dat方式。同时放置表单标记会干扰我的设计，所以这可能是个问题吗？

$('document').ready(function(){
           $('#my-button').on('click', function(e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup({
                appendTo: 'form'
                , zIndex: 8
                ,easing: 'easeOutBack'
                ,speed: 450
                ,transition: 'slideDown'
             });
            return false; });
});