jQuery Event Handler được tạo trong vòng

Question

Vì vậy, tôi có một nhóm các sự kiện như thế này:

$('#slider-1').click(function(event){ 
     switchBanners(1, true); 
}); 
$('#slider-2').click(function(event){ 
     switchBanners(2, true); 
}); 
$('#slider-3').click(function(event){ 
     switchBanners(3, true); 
}); 
$('#slider-4').click(function(event){ 
     switchBanners(4, true); 
}); 
$('#slider-5').click(function(event){ 
     switchBanners(5, true); 
}); 

Và tôi muốn chạy chúng thông qua một vòng lặp Tôi đã chạy một cái gì đó như thế này:

for(i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(function(event){  
      switchBanners(i, true); 
    }); 
} 

Về lý thuyết mà nên làm việc, nhưng nó dường như không một khi tôi tải tài liệu ... Nó không đáp ứng với bất kỳ id div cụ thể như nó nên khi nhấp vào ... nó tiến triển thông qua mỗi div bất kể tôi bấm vào. Hiện có nhiều người nghe sự kiện tôi muốn tự động tạo ra khi đang bay nhưng tôi cần những đầu tiên ...

tôi thiếu gì?

Answer 1

Đó là vì i không được đánh giá cho đến khi chức năng click được gọi, thời gian vòng lặp kết thúc chạy và i ở mức tối đa (hoặc bị ghi đè ở nơi khác trong mã).

Hãy thử điều này:

for(i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(function(event){  
     switchBanners($(this).attr('id').replace('slider-', ''), true); 
    }); 
} 

Bằng cách đó bạn sẽ nhận được số lượng từ id của phần tử đó là thực sự được nhấp vào.

Answer 2

Đây là vấn đề rất phổ biến mà mọi người gặp phải.

JavaScript không có phạm vi khối, chỉ hoạt động phạm vi. Vì vậy, mỗi hàm bạn tạo trong vòng lặp đang được tạo trong cùng một môi trường biến và vì vậy tất cả chúng đều tham chiếu cùng biến số i.

Để phạm vi biến trong môi trường biến mới, bạn cần gọi hàm có biến số (hoặc tham số hàm) tham chiếu giá trị bạn muốn giữ lại.

Trong đoạn mã dưới đây, chúng tôi tham khảo nó với tham số chức năng j.

// Invoke generate_handler() during the loop. It will return a function that 
    //           has access to its vars/params. 
function generate_handler(j) { 
    return function(event) { 
     switchBanners(j, true); 
    }; 
} 
for(var i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(generate_handler(i)); 
} 

Ở đây chúng ta gọi các generate_handler() chức năng, được thông qua vào i, và có generate_handler()trở lại một chức năng tham chiếu đến các biến cục bộ (tên j trong hàm, mặc dù bạn có thể đặt tên cho nó i cũng).

Các biến môi trường của hàm trả về sẽ tồn tại miễn là chức năng tồn tại, vì vậy nó sẽ tiếp tục có tham chiếu đến bất kỳ biến đã tồn tại trong môi trường khi/nơi nó được tạo ra.

---

UPDATE: Added var trước i để đảm bảo nó được khai báo đúng.

Answer 3

Thay vì làm một cái gì đó này .. emm .. thiếu thận trọng, bạn nên đính kèm một người biết lắng nghe sự kiện duy nhất và bắt các sự kiện chúng tôi biết họ bong bóng lên. Nó được gọi là "sự kiện đoàn".

Một số liên kết:

• http://davidwalsh.name/event-delegate
• http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-minutes/
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://lab.distilldesign.com/event-delegation/

nghiên cứu này. Đó là một điều khá quan trọng để tìm hiểu về quản lý sự kiện trong javascript.

Answer 4

[chỉnh sửa: đã thấy câu trả lời này nhận được đề cao và nhận ra nó sử dụng cú pháp cũ. Dưới đây là một số cú pháp được cập nhật, sử dụng phương thức ràng buộc sự kiện "on" của jQuery. Nguyên tắc tương tự cũng được áp dụng. Bạn liên kết với các phi tiêu diệt cha mẹ gần gũi, lắng nghe cho các nhấp chuột ON chọn định]

$(function() { 
    $('.someAncestor').on('click', '.slider', function(e) { 
    // code to do stuff on clicking the slider. 'e' passed in is the event 
    }); 
}); 

Lưu ý:.. Nếu chuỗi bạn khởi tạo đã có một chỗ thích hợp để chèn người nghe (tức là bạn đã có một tài liệu chức năng sẵn sàng hoặc tải trọng), bạn không cần bọc nó trong phương thức $(function(){}) của mẫu này. Bạn chỉ cần đặt phần $('.someAncestor')... tại vị trí thích hợp đó.

câu trả lời gốc duy trì kỹ lưỡng nhiều mã giải thích và di sản mẫu:

---

Tôi với tereško: ủy thác sự kiện là mạnh hơn làm mỗi nhấp chuột "theo yêu cầu" như nó được. Cách dễ nhất để truy cập toàn bộ nhóm các phần tử thanh trượt là cung cấp cho mỗi lớp được chia sẻ. Hãy nói rằng, "trượt" Sau đó, bạn có thể ủy một sự kiện phổ quát cho tất cả ".slider" yếu tố:

$(function() { 
    $('body').delegate('.slider', 'click', function() { 
     var sliderSplit = this.id.split('-'); // split the string at the hyphen 
     switchBanners(parseInt(sliderSplit[1]), true); // after the split, the number is found in index 1 
    }); 
}); 

Liddle Fiddle: http://jsfiddle.net/2KrEk/

Tôi ủy thác cho 'cơ thể' chỉ bởi vì tôi không biết cấu trúc HTML của bạn. Lý tưởng nhất là bạn sẽ ủy quyền cho cha mẹ gần nhất của tất cả các thanh trượt mà bạn biết sẽ không bị phá hủy bởi các thao tác DOM khác. Thường là loại bao bì hoặc div container.