click绑定事件介绍

淡淡的烟草味﹌ 2022-07-20 12:13 225阅读 0赞

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事件，如下：

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>