2013-06-08 47 views
7

Tôi có một chức năng, đó sẽ đính kèm handler click sự kiện vào yếu tố của tôi:Làm thế nào để ngăn chặn gắn trình xử lý sự kiện nhiều lần?

function attachClickToElem() { 
    $('.elem').on('click', function() { 
     alert('Hello World'); 
    }); 
} 

Vấn đề là bất cứ khi nào tôi gọi chức năng này, n click xử lý gắn với yếu tố của tôi, vì vậy khi tôi gọi nó hai lần , Tôi nhận được hai số alert khi tôi nhấp vào phần tử của mình:

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

Làm cách nào để ngăn chặn? Và kiểm tra xem phần tử của tôi đã xử lý click chưa?

Here is fiddle

+0

Tại sao không chỉ unbind trước khi bạn ràng buộc mỗi lần .... tiết kiệm trên rò rỉ bộ nhớ sau đó. – adrian

Trả lời

4

Working jsFiddle Demo

Sử dụng .each() phương pháp để lặp qua các yếu tố của bạn, và kiểm tra một cờ cho đã xử lý sự kiện với .data() phương pháp, nếu lá cờ là true, bỏ qua vòng lặp hiện tại. Nếu không, hãy đính kèm trình xử lý sự kiện vào phần và đặt cờ là true.

function attachClickToElem() { 
    $('.elem').each(function() { 
     var $elem = $(this); 

     // check if event handler already exists 
     // if exists, skip this item and go to next item 
     if ($elem.data('click-init')) { 
      return true; 
     } 

     // flag item to prevent attaching handler again 
     $elem.data('click-init', true); 

     $elem.on('click', function() { 
      alert('Hello World'); 
     }); 
    }); 
} 

Tài liệu tham khảo:

  • .each() - jQuery API Documentation
  • .data() - jQuery API Documentation
0

Something gần đây tôi tin rằng:

function attachClickToElem() { 
    $('.elem:not(.has-click-handler)') 
     .addClass('has-click-handler') 
     .on('click', function() { 
      alert('Hello World'); 
    }); 
} 
11

Hãy thử

function attachClickToElem() { 
    $('.elem').off('click.mytest').on('click.mytest', function() { 
     alert('Hello World'); 
    }); 
} 

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

Demo: Fiddle

Một cách khác

function attachClickToElem() { 
    $('.elem').filter(function(){ 
     return !$(this).data('myclick-handler'); 
    }).on('click.mytest', function() { 
     alert('Hello World'); 
    }).data('myclick-handler', true); 
} 

$(function() { 
    attachClickToElem(); 
    attachClickToElem(); 
}); 

Demo: Fiddle

+0

Tôi thích giải pháp đầu tiên với không gian tên sự kiện: sạch sẽ và đơn giản – xtian

+0

Khi nào bạn đề nghị sử dụng giải pháp thứ hai với bộ lọc? Chu kỳ off/on có đắt không? – xtian

+0

@xtian Tôi sẽ giới thiệu phần đầu tiên, nhưng để xử lý phần tử động, bạn thực sự nên sử dụng các sự kiện được ủy quyền –

Các vấn đề liên quan