JQuery绑定点击事件问题

时间:2015-01-09 21:13:02

标签: jquery

我试图用一个具有与事件处理程序相同功能但具有不同参数的click事件绑定五个不同的元素。 Heres是我的代码:

$("#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"));
问题是当我点击任何元素时,它总是跳过最后一个事件。在这种情况下setearImagen(" tendales")。不知道为什么:(任何线索?

这里是使用

的div
<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}"=""> 

我已经尝试过.on和.click,但仍然是同样的问题

这里是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');
    }
}

1 个答案:

答案 0 :(得分:0)

您将click事件绑定到右侧调用的方法的结果 - 也就是说,如果您在函数名后面有params,则javascript将立即调用该函数,并且绑定将转到期望该函数返回另一个可以处理click事件的函数。如果要将params传递给方法,则它们应该位于事件名称之后传递的单独对象中,因此:

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

你可以read more about it here