jQuery 요소에 함수 추가

Question

jQuery를 사용하여 개체에 함수를 추가하려고합니다. 아쉽게도 예상대로 작동하지 않습니다. This jsfiddle shows a minimal example of my problem. 방금 ​​jQuery를 시작하고 문서를 읽었지만 내 문제를 해결하기 위해 어느 방향으로 가야하는지 힌트가 필요합니다.

감사합니다.

<ul id="ul_list"> 
    <li id="li_a">a</li> 
</ul> 
$("#li_a").speak = function() { 
    alert("Hello I'm a!"); 
}; 

var button = $('<button/>').html('speak'); 
button.click(function() { 
    $('#li_a').speak(); 
}); 
button.appendTo("body"); 

Answer 1

도움 주셔서 감사합니다.

나는 내 문제에 대한 해결책을 찾지 못했을 것이다.

<ul id="ul_list"> 
    <li id="li_a">a</li> 
</ul> 
$('#li_a') [0].speak = function() { 
    alert('Hello I\'m a!'); 
}; 
var button = $('<button/>').html('speak2'); 
button.click(function() { 
    var el = $('#li_a') [0]; 
    if (typeof el.speak == 'function') el.speak(); 
}); 
button.appendTo('body'); 

나는 [DOM] 요소가 있다고 생각합니다.

Answer 2

멤버 함수를 잘못 추가하는 중입니다. 이렇게하려면 extend jQuery's prototype object이 필요합니다. 당신은 $.fn.speak에 연결해야합니다

$.fn.speak = function() { 
    alert("Hello I'm a!"); 
}; 

var button = $('<button/>').html('speak'); 
button.click(function() { 
    $('#li_a').speak(); 
}); 

Answer 3

이 jsfiddle을 시도해보십시오

http://jsfiddle.net/w22aj7rs/

(function ($) { 
 

 
    $.fn.speak = function() { 
 
     alert("Hello I'm speaking!"); 
 
     return this; 
 
    }; 
 

 
}(jQuery)); 
 

 
var button = $('<button/>').html('speak'); 
 
button.click(function() { 
 
    
 
    $('li').each(function() { 
 
     $(this).speak(); 
 
    }); 
 
}); 
 
button.appendTo("body");

Answer 4

당신이 jQuery의 $ 함수가 반환하기 때문에 작동하지 않습니다하고있는 요소를 호출 할 때마다 요소가 포함 된 새로운 배열 형 객체입니다. 이 중 하나의 인스턴스를 변경하면 해당 인스턴스 만 변경되고 다음 번에 $을 호출하면 요소를 가져올 때 새로운 배열이됩니다.

$("li_a").data("speak", function() { 
    alert("Hello I'm a!"); 
}); 

와 함수가 루프에서 호출해야하는

button.click(function() { 
    $("li").each(function() { 
     $(this).data("speak")(); 
    }); 
}); 

공지 사항과 전화 :

당신이 대신 할 수있는 것은 개체 내부의 기능을 저장하기 위해 jQuery의 data 기능을 사용할 수 있습니다 - 먼저 '말하기'에서 데이터에 액세스 한 다음 호출합니다.

이 방법은 각 요소마다 다른 동작을 원할 때 잘 작동합니다. 그들 모두가 비슷하게 행동한다면, 응답을 $.fn으로 확장하는 것이 더 좋을 것입니다. 이렇게하면 다른 객체가 모든 객체에 동작을 지정하기 때문에 다른 대답이 묘사됩니다.