Gỡ bỏ đúng trình xử lý sự kiện ẩn danh

Question

Tôi đang cố gắng tìm ra cách tốt nhất để loại bỏ trình xử lý sự kiện ẩn danh bằng cách sử dụng jQuery.

tôi xác định một biến để giữ đối tượng của tôi jQuery:

var dom = $('#private-module'); 

Sau đó trong đối tượng của tôi:

run: function() { 
    var button, that = this; 

    button = dom.append('<button class="btn">Click Me</button>'); 
    button.on('click', function(event) { 
     console.log('Clicked!'); 
     that.destroy(); 
    }); 
    }, 

    destroy: function() { 
    var button; 

    button = dom.find('.btn'); 
    button.off('click'); 
    } 

Không có vấn đề gì tôi làm, tôi không thể giết handler nhấp chuột vào nút. Cảm giác như sự hiểu biết của tôi ở đây về phạm vi là thiếu sót. Cách ưa thích, trong tình huống này để loại bỏ xử lý là gì? Tôi đã cố gắng đặt tên cho các sự kiện và tất cả các loại nhưng không may mắn vì vậy tôi đoán nó là một cái gì đó đơn giản mà tôi đã bỏ qua. Có lẽ tôi thậm chí không nên sử dụng các hàm ẩn danh cho trình xử lý sự kiện.

Chỉ cần bolt một cái gì đó vào lập luận của tôi cho việc sử dụng .append:

http://jsperf.com/jquery-append-vs-appendto

Dưới đây là giải pháp cuối cùng:

dom.append('<button class="btn">Send Message</button>'); 
button = dom.find('.btn'); 
button.on('click', function (event) { 
    sendTestMessage(); 
    that.destroy(); 
}); 

Tôi cũng đồng ý và hiểu về việc sử dụng phương pháp .Một . Cảm ơn vì điều đó.

Answer 1

button = dom.append('<button class="btn">Click Me</button>'); 

trả về số không, vì vậy bạn đã ràng buộc trình xử lý sự kiện trên dom.

Thay đổi:

button = $('<button class="btn">Click Me</button>').appendTo(dom); 

Và đây là working demo.

Answer 2

vấn đề là button là dom và không .btn:

button = dom.append('<button class="btn">Click Me</button>'); 

//a console.log(button) here reveals that button is "dom" 

//and thus you are adding a handler to "dom 
button.on('click', function(event) { 
    console.log('Clicked!'); 
    that.destroy(); 
}); 

một cách để làm điều này nhờ vào sức mạnh đoàn .on() là thêm chọn con của nguyên tố này bạn muốn để ràng buộc xử lý như tham số thứ hai.

button.on('click', '.btn' function(event) { 
    //the value of "this" in here is the ".btn" 
    console.log('Clicked!'); 
    that.destroy(); 
}); 

trong phá hủy, chúng tôi sử dụng .off() với một tham số thứ hai liên quan đến .btn:

button.off('click', '.btn');