기능은 정말 그것을 설명하는 방법을 알고하지 않았다

Question

제목 실례 jQuery 플러그인에서 여러 번 호출되는 :

http://jsfiddle.net/KpmyR/7/

당신이 보면 JS 바이올린, 플러그인을 작동하는 방법을 이해하기 위해 자체 컨트롤을 만들려고합니다. 내 플러그인을 호출했습니다 $("#textbox1").DTJS()

페이지에서 하나의 항목을 사용하면 페이지에 여러 인스턴스를 추가 할 때 플러그인이 정상적으로 작동하는 것처럼 보입니다. 코드가 기하 급수적으로 실행되는 것으로 보입니다. (기본적으로 내 플러그인에서 onClick 이벤트를 기다리고있다.) 이 순간이기 때문에

, 나는 아래처럼 내 $("#textbox1").DTJS() 세 번 호출 한 :

$(document).ready(function() { 
$("#textbox1").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 

$("#textbox2").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 


$("#textbox3").DTJS({ 
    'width': '75px', 
    'max': '15', 
    'min': '5' 
}); 
}); 

나는 아래 하나를 클릭하면이 증가/deincremements을 1, 나는 그것이 않는 가운데를 클릭하면 2로 나눈 다음 맨 위에있는 버튼을 클릭하면 3이됩니다.

왜 이런 일이 발생했는지 설명해주십시오.

Answer 1

그냥이 변경이에

$('.valueUp').click(...); 

을 :

$(this).siblings('.valueUp').click(...); 

동일 .valueDown 마찬가지입니다.

이벤트를 단지 .valueUp에 바인딩하면이 페이지를 페이지의 .valueUp에 바인딩하여 이벤트가 첫 번째에는 3 번, 두 번째에는 2 번 바인딩되는 이유를 설명합니다.

---

다른 팁 몇 가지 : 당신은 필요가 없습니다

• this

  가 이미

  Snuffleupagus는 지적이 this 이미 jQuery를 객체 인 jQuery를 개체입니다 $(this)에 전화하십시오. 이것은 $.fn에 추가하는 모든 함수에 해당됩니다.

• 플러그인의 말에 this을 반환하여 반환 this

  , 당신은 chainability을 유지한다. 예를 들어 return this을 플러그인 끝에 추가하면

  $ ("# textbox1") DTJS ({ '너비': '75px', '최대': '15 자 ','min ':'5 '}). fadeIn();

Answer 2

클래스를 통해 이벤트를 적용하기 때문에 플러그인을 호출 할 때마다 .valueUp 및 .valueDown의 모든 인스턴스에 다른 이벤트를 바인딩합니다.

버튼을 만들고 저장된 복사본에서 이벤트를 바인딩 할 때 복사본을 유지하는 것이 좋습니다. (동일한 범위에 동일한 요소를 여러 번 선택하는 경우 당신이 메모리에 저장하는 것이 더 낫다.)

는 예를 들어,

var up = $('<button class="valueUp valueHoldDown btn-mini btn-primary' + settings.btnClass + '">-></button>'); 
this.after(up); 
up.click(function(){ 
    // code 
}); 

이 또한 참고 jQuery를이 jQuery.fn에서 함수를 호출 할 때, this은 원시 요소가 아닌 jQuery 객체를 참조하므로 $(this)을 수행 할 필요가 없습니다.

Answer 3

나는 당신이 겪고있는 문제가 클릭 이벤트 처리기로 생각 :

$(".valueUp").click(function() {...}) 

이 라인에서 사용되는 선택이 valueUp의 클래스와 모든 요소를 ​​선택합니다. 그러나 페이지에 더 많은 뉘앙스 컨트롤을 추가하면 페이지의 각 단추에 대해 이벤트 핸들러가 실행되므로 페이지의 컨트롤만큼 뉘앙스 된 값이됩니다.

변경 선택이 고유 ID에 기반 ID, 또는이 입력 컨트롤 자체를 기준으로되도록 선택을 변경하려면 :

은 몇 가지 옵션이 있습니다. 여기

가 jsFiddle에서 작동하는 예입니다 http://jsfiddle.net/Xfp8a/