자바 스크립트 클릭 기능을 익명 해제

Question

정말 기본적인 것들. 클릭 함수에 이름을 지정하고 일부 매개 변수를 지정하고 싶습니다. 목표는 사용자가 다양한 데이터를 삭제할 수 있도록하는 것과 같은 일반 작업에 대해 하나의 일반 기능 만 작성할 수있는 코드 재사용 성입니다.

내 뜻을 나타내는 jsfiddle입니다.

되는 HTML :

<button>delete this</button> 
<div data-id="3" class="delete">something bad</div> 
<div data-id="4" class="delete">something else bad</div> 

과 JS :

// this function would be loaded on my site's template and therefore would be available across my entire site. 
function deleteThis(data_id){   
    $('button').on('click', 'button', function(){ 
     $('div[data-id="'+data_id+'"]').hide(); 
    }); 
} 

var clicked_id=3; 
function deleteThis(clicked_id); 
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page. 

가 어떻게이 버튼을 클릭 이벤트에 이름을 부여 할

그리고 여기에 그 코드입니까?

업데이트 감사합니다. $('button')은 $(document.body)이거나 버튼의 부모 요소 여야합니다. 당신이 그 간단한 변화를하면 그것은 효과적입니다. Michael Buen이 아래에서 제안하는 것처럼이를 수행 할 수도 있습니다.

Answer 1

그냥 코드를 리팩토링, 자신의 기능에

<button>delete this</button> 
<div data-id="3" class="delete">something bad</div> 
<div data-id="4" class="delete">something else bad</div> 
​ 

$('button').on('click', function() { deleteImmediately(3) }); 

function deleteImmediately(id) { -- refactored code 
    $('div[data-id='+id+']').hide(); 
}​ 

라이브 테스트를 삭제 기능을 넣어. deleteThis는 처리기에있는 경우에만 의미가 있습니다.

수정 HTML : - : (안된)

var deleteTargetId = 'del_3'; //clicked_id renamed for clarity 

function deleteThis(targetId){ 
    $('#'+targetId).remove(); //removes rather than hides the html 
} 

$('button').click(function(){ 
    deleteThis(deleteTargetId); 
}); 

지금 당신이 deleteTarget와 HTML을 교환 할 수

<button>delete this</button> 
<div id="del_3" class="delete">something bad</div> 
<div id="del_4" class="delete">something else bad</div> 

JS를 (사용자 정의 사용 HTML을 참조하는 속성을하지 않는 그들은 느린이야) 그 신분증을 가지고 와서 요

그러나 숙제 인 경우 숙제를 이해하면 궁금합니다. 'clicked_id'라는 이름의 var은 div가 사라지고 위임을 사용하도록 div를 클릭하는 것이 좋습니다. 그거 쉽지.

여기에서 무슨 일이 벌어지는 지 보려면 이벤트 위임 및 이벤트 버블 링을 이해해야합니다. 기본적으로 무언가가 클릭되면 이벤트가 부모 요소에서 부모 요소의 부모 요소에서 HTML 태그까지 실행됩니다. 이것은 모든 이벤트에서 발생하며 컨테이너에 이벤트 리스너가 거의 할당되지 않기 때문에 생각할 수있는 문제가 발생하지 않습니다. 링크 및 버튼은보다 일반적으로 끝점 노드이거나 대부분 범위 또는 이미지를 포함합니다. 일반적으로 버블 링이 문제를 일으키는 이유는 HTML을 사용하여 무언가를하고 있거나 위임을 사용 했어야했기 때문입니다.

'on'은 한 번 적절하게 이름이 붙여지고 혼란에 취약한 '위임자'jquery 메소드에 대한 새로운 오줌이 약한 이름입니다. 기본적으로 'delete'클래스가있는 본문의 모든 것이 처리기를 트리거합니다. 아이디어는 클릭 한 div를 죽이는 것이므로 ID에 대해서는 신경 쓰지 않습니다. 'this'는이 참조를 제공합니다. 대부분의 메소드가 '본문'에 'this'포인트를 가지므로 JQ에서는 예외적 인 동작이지만 이벤트 위임을 가리키는 것이 더 유용합니다.

$('body').on('click', '.delete', function(e){ 
    $(this).remove(); //this refers to the originally clicked element 
}); 
//note: not the solution you asked for, but possibly the one you needed. 

Answer 2

$('button').on('click', 'button', clickHandler);을 사용하면 clickHandler 기능을 참조 할 수 있습니다.

재사용 가능하다는 점을 제외하면 다음과 같은 장점이 있습니다.

• 나는 익명 메소드 불가능 내 방법을 확대 할 수있는 경우 clickHandler
• 사람에 버그가 그냥 경우 패치를 통해 보낼 수 있습니다
• 읽을 수있는, 또한 유용 볼 수있는 오류 발생시 스택 추적

희망이 있습니다.

업데이트 : 당신이 다른 방법으로 요소를 제거 할 수 있습니다

function clickHandler(ev) { 
    ev.preventDefault(); 
    // ... handler code 
} 

Answer 3

:

$('button').on('click', function(){ 
     $(this).next("div").remove(); 
    }); 

당신 피들러에서

http://jsfiddle.net/fz5ZT/46/

Answer 4

의 (function deleteThis(){})()은 비공개하고있다 그리고 당신이 글로벌으로 액세스하려고!

Answer 5

거의 옳았습니다. http://jsfiddle.net/e2kuj/2/

Answer 6

난 당신이 이벤트를 오해 것 같아요 : - 나는 그것을 업데이트>http://jsfiddle.net/fz5ZT/41/

function deleteThis(id){ 
    $('button').click(function(){ 
     $('div[data-id="'+id+'"]').hide(); 
    });  
}; 
deleteThis(3);​