jquery 在另一个事件处理程序中设置事件处理程序

Question

我的网站有很多图片和一个 js 图片编辑器。我想要做的就是在图像上双击以在编辑器中打开它，然后当我按下保存时（我在编辑器下方生成图像数据的按钮 url）根据编辑器更新它。现在代码。

$("body").delegate("img",'dblclick', function(){
        var parent = $(this).parent()
        var input = parent.find("input[name$='-source']").first();
        var source = input.val();
        var self = $(this);

        $("#save_struct_button").on('click',function(){
            var self_this = $(this)
            //editor is the instance of image editor
            editor.saveImage(self,input);

        });  });

问题是当我第一次点击 #save_struct_button 时，一切正常，但第二次就不行了。似乎第一个 onclick 仍然附加到按钮。有什么建议可以实现这一目标吗？谢谢

编辑：我的第二次尝试是 return 函数如下：

$("#save_struct_button").on('click',function(){
            var self_this = $(this);

            return function(self,input){
                editor.saveImage(self,input);
            }(self_this,input);*/


        });

但还是没有运气:)

Answer 1

您可以使用 .off() 删除以前的处理程序，但更好的选择是使用像

这样的共享变量

var $imginput, $img;

$("body").delegate("img", 'dblclick', function () {
    var parent = $(this).parent()
    var $imginput = parent.find("input[name$='-source']").first();
    var source = $imginput.val();
    var $img = $(this);

});

$("#save_struct_button").on('click', function () {
    if (!$imginput) {
        return;
    }
    var self_this = $(this);
    //editor is the instance of image editor
    editor.saveImage(self, input);

});

如果您想继续使用您的结构，请使用 .off() 之类的

$("body").delegate("img", 'dblclick', function () {
    var parent = $(this).parent()
    var input = parent.find("input[name$='-source']").first();
    var source = input.val();
    var self = $(this);

    $("#save_struct_button").off('click.imgeditor').on('click.imgeditor', function () {
        var self_this = $(this)
        //editor is the instance of image editor
        editor.saveImage(self, input);

    });
});

jquery 在另一个事件处理程序中设置事件处理程序

jquery set event handler in another event handler

javascript

jquery

event-handling