js/jquery 所有页面点击事件(持续更新)

// 切换菜单

<div class="box">
                <div class="box-item" id="0">
                    <span>菜单1</span>
                </div>
                <div class="box-item" id="2">
                    <span>菜单2</span>
                </div>
            </div>
        

$('.box .box-item').on('click', function () {
            $(this).stop(true, false).addClass('act').siblings().stop(true, false).removeClass('act');
        });

 

//radio 点击事件

<input type="radio" name="MealType" value="1" checked> 选项1
<input type="radio" name="MealType" value="2"> 选项2

$('input[type=radio][name=MealType]').change(function () {
            console.log(this.value)
        })

//asp:RadioButtonList 点击事件（右键查看控件生成的html源码，发现ID已经变成name了）

<asp:RadioButtonList ID="contract_checklegitimate" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Value="0">是</asp:ListItem>
<asp:ListItem Value="1">否</asp:ListItem>
</asp:RadioButtonList>

$('input[type=radio][name=contract_checklegitimate]').change(function () {
console.log(this.value)
})

 

 //DropDownList 点击修改事件

<asp:DropDownList ID="contract_paytype" runat="server" CssClass="allselect">
<asp:ListItem Value="1">百分比方式</asp:ListItem>
<asp:ListItem Value="2">次结</asp:ListItem>
</asp:DropDownList>

 

$("#contract_paytype").on('change', function () {
changePayType($(this).val());
})

 

//动态生成的元素添加点击事件

1. 方法1

$(function(){
var target = $("#divBox");
target .append("<img class='preview_image' src='/img/preview1.jpg' />");
target .append("<img class='preview_image' src='/img/preview2.jpg' />");
target .append("<img class='preview_image' src='/img/preview3.jpg' />");

target.on("click", ".preview_image", function(){
console.log(this); // 输出所点击的img
});
});

2.官方做法

$(document).on("click",'#lyysb a',function(){
if(!$(this).hasClass('cur')){
$(this).addClass('cur');
} else {
$(this).removeClass('cur');
}
});

 

//点击按钮往原有层级后面追加或删除

<table style="width: 100%; margin: 0 auto; border: 1px solid #BBBBBB; border-collapse: collapse" class="tj_table paynode repair_sec2_con">
<thead>
<td>序号</td>
<td>节点名称</td>
<td>支付百分比</td>
<td>时间</td>
<td>备注</td>
<td>操作</td>
</thead>
<tr>
<td>1</td>
<td>
<input class="tableCla" type="text" name="paynodename" /></td>
<td>
<input class="tableCla" type="text" name="payrate" /></td>
<td>
<input name="paytime" type="text" class="Wdate input" onclick="WdatePicker({highLineWeekDay:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d'})" />
<td>
<input class="tableCla" type="text" name="payremark" /></td>
<td><a class="delItem">删除</a></td>
</tr>
</table>

var i_nums = 1;
$(".repair_sec2_con").on("click", ".delItem", function () { $(this).parent().parent().remove(); i_nums-- });
$(".addpaybtn").click(function () {
i_nums++;
$(".repair_sec2_con").eq(0).append('<tr><td>' + i_nums + '</td>' +
'<td><input class="tableCla" type="text" name="paynodename" /></td>' +
' <td><input class="tableCla" type="text" name="payrate" /></td>' +
'<td><input autocomplete="off" Width="38%" name="paytime" type="text" class="Wdate input" onClick="WdatePicker({highLineWeekDay:true,dateFmt:\'yyyy-MM-dd\',minDate:\'%y-%M-%d\'})" /></td>' +
'<td><input class="tableCla" type="text" name="payremark" /></td>' +
'<td><a class="delItem">删除</a></td></tr>');
});