2015-01-09 4 views
0

메신저는 이벤트 처리기와 같은 기능을하지만 다른 매개 변수를 가진 클릭 이벤트로 다섯 가지 요소를 바인딩하려고합니다. Heres는 내 코드입니다.JQuery 바인딩 클릭 이벤트 문제

$("#areaascensor").bind("click", setearImagen("ascensor")); 
$("#areaflat").bind("click", setearImagen("flat")); 
$("#areaduplex").bind("click", setearImagen("duplex")); 
$("#areasimple").bind("click", setearImagen("simple")); 
$("#areatendales").bind("click", setearImagen("tendales")); 

문제는 내가 요소 중 하나를 클릭하면 allways가 마지막 이벤트를 건너 뜁니다. 이 경우에는 setearImagen ("tendales"). 어떤 단서 :(왜 몰라요? 여기

내가 이미 CSTE 연구진과 .click하지만 여전히 같은 문제를 시도

<div class="morph-button morph-button-large" id="coordenadas"> 
<area shape="rect" id="areaflat" coords="129, 50, 381, 152" href="#" style="border: 1px solid;" data-maphilight="{" strokecolor":"000000","strokewidth":1,"fillcolor":"0000ff","fillopacity":0.4}"=""> 
<area shape="rect" id="areaduplex" coords="129, 154, 383, 283" href="#" style="border: 1px solid;" data-maphilight="{" strokecolor":"000000","strokewidth":1,"fillcolor":"0000ff","fillopacity":0.4}"=""> 
<area shape="rect" id="areasimple" coords="129, 286, 391, 364" href="#" style="border: 1px solid;" data-maphilight="{" strokecolor":"000000","strokewidth":1,"fillcolor":"0000ff","fillopacity":0.4}"=""> 
<area shape="rect" id="areatendales" coords="141, 6, 362, 31" href="#" style="border: 1px solid;" data-maphilight="{" strokecolor":"000000","strokewidth":1,"fillcolor":"0000ff","fillopacity":0.4}"=""> 
<area shape="rect" id="areaascensor" coords="240, 368, 278, 523" href="#" style="border: 1px solid;" data-maphilight="{" strokecolor":"000000","strokewidth":1,"fillcolor":"0000ff","fillopacity":0.4}"=""> 

사용하여 DIV 메신저입니다

여기

은 setearImagen입니다

function setearImagen(tipo){ 
    if(tipo == "flat"){ 
     $("#interiorImg").html(''); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXUVlCM0FIQUZ1UDg" alt="" width="800" height="500" style="padding-right:10px;"/>'); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXRVY3bEpmVThkVk0" alt="" width="400" height="500"/>'); 
     $("#descripcionDepa").text('Apartamento Flat'); 
    }else if(tipo == "duplex"){ 
     $("#interiorImg").html(''); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXM3ZTdU1MTkRCT3c" alt="" width="800" height="500" style="padding-right:10px;"/>'); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXNjc0ajh3bEM2eTg" alt="" width="400" height="500" style="padding-right:10px;"/>'); 
     $("#descripcionDepa").text('Apartamento Duplex'); 
    }else if(tipo == "simple"){ 
     $("#interiorImg").html(''); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXSmFwaTZ2SGVNSE0" alt="" width="800" height="500" style="padding-right:10px;"/>'); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXcThRcXhveTVlams" alt="" width="400" height="500" style="padding-right:10px;"/>'); 
     $("#descripcionDepa").text('Apartamento Simple'); 
    }else if(tipo == "tendales"){ 
     $("#interiorImg").html(''); 
     $("#interiorImg").append('<img src="undefined" alt="" width="800" height="500" style="padding-right:10px;"/>'); 
     $("#interiorImg").append('<img src="undefined" alt="" width="400" height="500" style="padding-right:10px;"/>'); 
     $("#descripcionDepa").text('Tendales'); 
    }else if(tipo == "ascensor"){ 
     $("#interiorImg").html(''); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXMVRuZHlQdVVzSGM" alt="" width="800" height="500" style="padding-right:10px;"/>'); 
     $("#interiorImg").append('<img src="https://drive.google.com/uc?export=view&id=0B9LTjyArujnXNkUyVW1PMjRhSlE" alt="" width="400" height="500" style="padding-right:10px;"/>'); 
     $("#descripcionDepa").text('Ascensor'); 
    } 
} 
+0

가 다른 요소의 내부 요소 중 하나는 할 수 있습니까? 어쩌면 우리에게 당신의 HTML을 보여줄 필요가 있습니다 – DLeh

+0

완전한 코드 예제를 게시 할 수 있습니까? – j08691

+0

코드를 보지 않고 내 생각 엔 당신의 이벤트가 dom을 버블 링하고있을 가능성이 있습니다. 사용하는 jquery의 버전에 따라 두 가지 바인딩 방법이 있습니다. jquery 1.7 이하인 경우에는 bind를 사용하십시오. 더 큰 경우에는 사용하십시오. –

답변

0

다음과 같은 방법으로 클릭 이벤트를 바인딩합니다. 오른쪽에서 호출됩니다. 즉 함수 이름 뒤에 params가 있으면 javascript가 해당 함수를 즉시 호출하고 바인드는 해당 함수가 click 이벤트를 처리 할 수있는 다른 함수를 반환 할 것으로 기대합니다. 당신이 방법 PARAMS 전달하려는 경우 그들은 따라서, 이벤트 이름 경과 별도의 오브젝트에 있어야합니다 :

$('selector').bind('click', {arg: val}, setearImagen); 

당신은 read more about it here

+0

안녕하세요, thx 답장을 보내주세요. ("click", {value : "tendales"}, setearImagen) 하지만 오류가 발생합니다. 그게 무슨 뜻입니까? – Velroj

+0

그래,하지만 setearImagen을 변경해야 할 것입니다. 원래 의도 한 값이 아닌 인수로 이벤트를 가져 오기 때문입니다. 링크를 읽어야합니다. 자세한 내용은 –

+0

이제 코드를 살펴 보았으므로 머리카락을 꺼내고 있습니다. 별도의 핸들러를 하나씩 작성하고 매개 변수 및 if 문 사용을 중지하십시오. 그냥 가난한 코드. –