Question

我有一个包含多行的表单，每行都有一个带链接的删除按钮。我想逐步增强链接，为这些按钮添加一个bootstrap模式。所以我正在做的是：

抓住页面上的所有删除按钮元素。
循环浏览每个按钮。
对于每个按钮，根据点击的按钮更改模态的某些属性，包括在“确定”被激活时调用的网址。

一切都像我想要的那样工作，除了每次触发模态并单击“确定”按钮时，附加到其上的URL将附加到前一个。

http://jsfiddle.net/bittersweetryan/9TpX8/（单击“删除”按钮，然后单击“确定”一次，打开控制台）

这是代码

//anonymous function to grab all delete buttons and turn into a modal
(function(){
    var delBtn = $(".delete"),
        $modal = $("#modal-delete");

    if(!$modal.size()){
        $modal = $('<div id="modal-delete" class="modal hide fade"><div class="modal-header"> <a href="#" class="close">&times;</a><h3>Confirm Delete</h3></div><div class="modal-body" id="modal-content"></div><div class="modal-footer"> <a href="#" id="okButton" class="btn danger">OK</a> <a href="#" id="cancelButton" class="btn secondary">Cancel</a> </div></div>').appendTo("body");
    }

    delBtn.each(function(){
        var $button = $(this),
            clickHandler,
            href= $button.attr("href");

        if(href){
            clickHandler = function(){
                console.log(href);
                //return window.location=href;
            };
        }
        else{
            clickHandler = $button.click;
        }

        $button.attr("data-toggle","modal").
                attr("data-target","#modal-delete");

        $button.on("click",function(){
            $modal.find("#okButton").on("click",function(){
                clickHandler();
                $modal.modal('hide');
            }).
            end().
            find("#cancelButton").on("click",function(){

                $modal.modal('hide');
            }).
            end().
            find("#modal-content").html($button.attr("title"));
        });
    });

})();

Answer 1

每次调用对话框时，都会将另一个单击处理程序附加到“ok”。快速修复：

$modal.find("#okButton").one("click",function(){
    clickHandler();
    $modal.modal('hide');
})

Your updated fiddle.

Answer 2

通常，使用jQuery绑定处理程序会在队列中添加一个新的处理程序;它不会用新的处理程序覆盖现有的处理程序。

经过多次烧毁后，大部分都试图正确绑定到动态生成的控件，我刚刚开始坚持

.unbind("click")

在设置onclick绑定之前在队列中。

Some new fiddle.

单击每次单击时附加的事件

2 个答案: