click绑定事件介绍

Java中的click事件介绍：

1、option绑定click事件

　　对于类似如下一段代码绑定click事件

<span class="custom-select"  id="locationSelect">
    <i class="location-icon"></i>
    <select class="location-select"  id="locationOption">
        <option value="Location1">Location1</option>
        <option value="Location2">Location2</option>
        <option value="Location3">Location3</option>
        <option value="Location4">Location4</option>
    </select>
</span>

//法一：
<script type='text/javascript'>
    (function($, A){
        $('#locationSelect select').change();
        $('#locationSelect select').bind("change", function(){
            alert(this.value);
            alert($(this).find("option:selected").text());
        });
    })(jQuery, AUI());
</script>

//法二：
<script type='text/javascript'>
    (function($, A){
        $("#locationOption").change( function(){
            alert(this.value);
            alert($(this).find("option:selected").text());
        });
    })(jQuery, AUI());
</script>

2、触发click事件后，生成的html，绑定click事件

//以下html是在页面刷新结束后，点击页面上的，触发click事件之后，生成的html
<ul class='ui-tabs mod-tab-hourly ui-large-screen and-up'>
    <li class='ui-tab ui-tab-active' id='search-header-hour'>
        <a href='#weather-tab-1'>Hourly</a>
    </li>
    <li class='ui-tab' id='search-header-days'>
        <a href='#weather-tab-2'>"+labelDay+"</a>
    </li>
</ul>

对于以上生成的html，绑定click事件，如下：

<script type='text/javascript'>
    (function($, A){
        $("#search-header-hour").live("click",function(A){
            $("#search-header-days").removeClass("ui-tab-active");
            $("#search-header-hour").addClass("ui-tab-active");
            $("#search-body-hour").show();
            $("#search-body-days").hide();
            A.preventDefault()
        );
    })(jQuery, AUI());
</script>

3、对于<a>标签的click事件
　　<a>标签的click事件不能有href。对于foreach/for循环生成的一系列标签，如果想触发他们分别会有各自对应的click事件产生，这时不能绑定id(id是唯一的)，可以绑定它的class(class是可以有多个的)可以采用下面这种方法(想得到它的哪一个属性，就将他存储在标签中，再触发click事件的时候，从里面去得到)。

<a class="watch-trailer ui-larger-screen and-up" watch-trailer-file-url="$!{movieVideoUrl}" watch-trailer-image-url="$!{movieImageUrl}" watch-trailer-title="$!{movieTitle}" watch-trailer-description="$!{watchTralierDescription}">
    Watch Trailer
    <i class="nxs-icon-play"></i>
</a>

对于上面的这段html绑定click事件：

<div id="video-player">Loading the player...</div>
<script src="http://content.jwplatform.com/libraries/rWmezVqk.js"></script>
<script type="text/javascript" >
    (function($, A){
        $("a[class='watch-trailer ui-larger-screen and-up']").click(function(){
            var $vid = $(this);
            var descriptions = $vid.attr('watch-trailer-description');
            var description = descriptions.replace(/_/g, '"');
            var playerInstance = jwplayer("video-player");
            playerInstance.setup({
                file: $vid.attr('watch-trailer-file-url'),
                image: $vid.attr('watch-trailer-image-url'),
                width: 640,
                height: 360,
                title: $vid.attr('watch-trailer-title'),
                description: description
            });
        });
    })(jQuery, AUI());
</script>