JQuery에서 텍스트 상자 용 버튼 만들기 및 클릭 기능 할당하기

Question

다음 코드는 페이지의 각 texbox에 대해 두 개의 버튼 (오른쪽의 왼쪽에 하나)을 생성합니다. 아이디어는 증가/감소 텍스트 상자를 만드는 것입니다. 코드는 하나의 텍스트 상자에서 작동하지만 2 개 이상의 모든 단추로 모든 텍스트 상자를 증가/감소시킵니다.

비행 중에 버튼을 만들고 증가/감소를 위해 텍스트 상자에 첨부하는 방법을 알려주세요.

jQuery.fn.incrementer = function() { 
    this.val(0); 
    this.before("<input class='incrementer_minus' type='button' value=' - '/>");   
    var myobj = this; 
    $(".incrementer_minus").live('click', function(){ 
     $(myobj).val(parseInt(JQ(myobj).val()) - 1); 
    }); 
    this.after("<input class='incrementer_plus' type='button' value=' + '/>"); 
    $(".incrementer_plus").live('click', function(){ 
     $(myobj).val(parseInt(JQ(myobj).val()) + 1); 
    }); 
} 

JQ("#increment").incrementer(); 
JQ("#increment2").incrementer(); 

Answer 1

당신은 와 클릭 이벤트를 incrementer_minus의 모든 인스턴스를 연관되어 있습니다 .. 플러그인의 일부이며, incrementer_plus 할 때 :

$(".incrementer_plus").live('click'... 

방금 ​​생성 한 특정 이벤트에 이벤트를 첨부하면됩니다.

live이 필요하지 않으므로 live 대신 bind을 사용했습니다.

또한 편의상 JQ을 jQuery으로 변경했습니다. 다시 변경할 수 있습니다.

테스트를 아웃 : 희망이 (? 여전히) 될 수 http://sean-o.com/increment

난 그냥 그런 사용할 수 있도록 만든 :http://jsfiddle.net/mAsr9/

jQuery.fn.incrementer = function() { 
    var myobj = this; 
    this.val(0); 

     // Create new element, and insert before 'this' 
    jQuery("<input class='incrementer_minus' type='button' value=' - '/>").insertBefore(this) 

      // Then bind the click event to that new element 
     .bind('click', function(){ 
      $(myobj).val(parseInt(jQuery(myobj).val()) - 1); 
     }); 

     // Create new element, and insert after 'this' 
    jQuery("<input class='incrementer_plus' type='button' value=' + '/>").insertAfter(this) 

      // Then bind the click event to that new element 
     .bind('click', function(){ 
      $(myobj).val(parseInt(jQuery(myobj).val()) + 1); 
     }); 
} 

$(function() { 
    jQuery("#increment").incrementer(); 
    jQuery("#increment2").incrementer(); 
}); 

Answer 2

당신은 스피너 후입니다 ..
여기
http://plugins.jquery.com/project/spinbox
http://docs.jquery.com/UI/Spinner
http://www.command-tab.com/2007/05/07/jquery-spinner-plugin/

Answer 3

가 jQuery를 증가 플러그인에서보세요 너에게 도움이된다.