关于这个主题有几个问题，但这个用例是不同的。我已经阅读了有关动态添加DOM元素的所有问题的答案，因此我必须使用事件委派。但这不是这里的用例。 我在DOM元素上添加了一个click事件监听器，它不是动态添加的。
以下是html页面
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSourceMain" runat="server"
ConnectionString="<%$ ConnectionStrings:AtidConnectionString %>"
SelectCommand="SELECT [ID], [first_name], [last_name] FROM [Contacs]"
DeleteCommand="DELETE FROM [Contacs] WHERE [ID] = @ID"
InsertCommand="INSERT INTO [Contacs] ([ID], [first_name], [last_name]) VALUES (@ID, @first_name, @last_name)"
UpdateCommand="UPDATE [Contacs] SET [first_name] = @first_name, [last_name] = @last_name WHERE [ID] = @ID">
<DeleteParameters>
<asp:Parameter Name="ID" Type="String" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="ID" Type="String" />
<asp:Parameter Name="first_name" Type="String" />
<asp:Parameter Name="last_name" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="first_name" Type="String" />
<asp:Parameter Name="last_name" Type="String" />
<asp:Parameter Name="ID" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
</asp:UpdatePanel>
<asp:CheckBox ID="CheckBox7" runat="server" />
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False"
ShowHeaderWhenEmpty="True"
CellPadding="4"
DataKeyNames="ID"
DataSourceID="SqlDataSourceMain"
ForeColor="#333333" Height="256px" PageSize="20"
style="margin-left: 240px; margin-right: 53px; margin-top: 1px"
Width="517px" OnRowCommand="delete_button_Click"
OnRowDataBound="OnRowDataBound" OnDataBound="fun">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowDeleteButton="True" />
<asp:BoundField DataField="ID" HeaderText="ID"
SortExpression="id" />
<asp:BoundField DataField="first_name" HeaderText="first name"
SortExpression="first_name" />
<asp:BoundField DataField="last_name" HeaderText="last name"
SortExpression="last_name" />
</Columns>
<EditRowStyle Height="15px" HorizontalAlign="Center" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White"
Height="10px" HorizontalAlign="Center" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<asp:CheckBox ID="CheckBox8" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
以下是jquery脚本
<div class="min-content">
<div class="min-width">
<div class="crumbs">
<a href="javascript:;" class="home-link green-link"><span>Home</span></a>
<span class="icon-arrow"></span>
<span class="current">Challenges</span>
</div>
<!-- end .crumbs -->
<div class="tabs-filter">
<ul>
<li class="current"><a href="javascript:;">ALL CHALLENGES</a></li>
<li><a href="challenges-my.html">MY CHALLENGES</a></li>
</ul>
<div class="filter-items">
<div class="icon-btns">
<a href="javascript:;" class="icon-list icon-active" data-icon-list></a>
<a href="javascript:;" class="icon-grid" data-icon-grid></a>
<a href="javascript:;" class="filter-btn green-btn" data-filter-button>Filter</a>
</div>
<div class="filter-content hide">
<h2 class="titles-box">
<strong class="texts">FILTER</strong>
<a href="javascript:;" class="icon-close-btn"></a>
</h2>
<!-- end .titles-box -->
<div class="filter-forms">
<ul>
<li>
<strong class="titles">Challenges Name</strong>
<span class="input-box">
<input name="" type="text">
</span> </li>
<li>
<strong class="titles">Tags</strong>
<span class="input-box">
<input name="" type="text">
</span>
<span class="texts-ex">ex: design, mobile, desktop, etc</span>
</li>
<li class="select-section">
<strong class="titles">Challenge Type</strong>
<div class="dropdown-select">
<a href="javascript:;" id="select-challenge-type" class="select-toggle"> <i></i></a>
<div class="select-menu hide">
<div class="scroll-page">
<ul>
<li><a href="javascript:;" class="active">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
<li><a href="javascript:;">Lorem Ipsum</a></li>
</ul>
</div>
</div>
</div>
<!-- end .dropdown-select -->
</li>
<li>
<strong class="titles">Prices</strong>
<div class="slider-box">
<div id="slider-range" data-slider-range></div>
<p>
<input type="text" id="amountMin" class="pull-left" readonly>
<input type="text" id="amountMax" class="pull-right" readonly>
<span class="clearfix"></span>
</p>
</div>
</li>
</ul>
<div class="btn-box">
<a href="javascript:;" class="reset-btn gray-btn" data-reset-button>RESET</a>
<a href="javascript:;" class="apply-filter-btn green-btn">APPLY FILTER</a>
</div>
</div>
<!-- end .filter-forms -->
</div>
<!-- end .filter-content -->
</div>
</div>
<!-- end .tabs-filter -->
<div class="tabs-content">
<div class="filter-lists-content hide">
<h2 class="titles-box">
<strong class="texts">FILTER LISTS</strong>
<a href="javascript:;" class="icon-close-btn icon-filter-lists-close-btn"></a>
</h2>
<!-- end .titles-box -->
<ul>
<li>
<a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
<span><strong>Challenges Name : </strong> Lorem Ipsum Dolor</span>
</li>
<li>
<a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
<span><strong>Tags :</strong> Tag1, Tag2, Tag3</span>
</li>
<li>
<a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
<span><strong>Challenges Type : </strong> Lorem Ipsum Dolor</span>
</li>
<li>
<a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
<span><strong>Prices :</strong> $50 - $2000</span>
</li>
</ul>
<span class="clearfix"></span>
</div>
<!-- end .filter-lists-content -->
<div class="list-content">
<div class="row" data-ng-class-even="'blue-border'" data-ng-repeat="challenge in challenges">
<div class="min-box">
<div class="col-md-8">
<span class="texts"><a href="javascript:;" class="green-link">CHALLENGES #{{challenge.id}} {{challenge.title}}</a></span>
<span class="texts">
<span class="pull-left"><strong>Type : </strong>{{challenge.challengeType.name}}</span>
<span class="pull-right">Created on {{challenge.createdDate | date: 'longDate'}}</span>
</span>
</div>
<div class="col-md-2">
<span class="texts">{{challenge.registrationCount}} <strong>Registants</strong></span>
<span class="texts">{{challenge.submissionCount}} <strong>Submissions</strong></span>
</div>
<div class="col-md-2">
<span class="texts spacing"><strong class="icon-golden-trophy">$ {{challenge.awardAmount}}</strong></span>
<span class="texts"><strong class="icon-blue-funnel"></strong></span>
</div>
</div>
<div class="btn-box">
<span class="pull-right">
<a href="javascript:;" data-ng-click="submitSolution(challenge)" data-ng-if="challenge.registered" class="green-btn">SUBMIT SOLUTION</a>
<a href="javascript:;" data-ng-click="register(challenge)" data-ng-if="!challenge.registered" class="green-btn">REGISTER</a>
<a href="javascript:;" data-ng-click="details(challenge)" class="green-btn">DETAILS</a>
<a href="javascript:;" data-ng-click="viewSubmissions(challenge)" data-ng-if="challenge.registered && challenge.canViewSubmissions" class="green-btn">VIEW SOLUTIONS</a>
</span>
</div>
</div>
<!-- end .row -->
<div class="page-bar">
<div class="pull-left">
<span class="texts">View :</span>
<div class="dropdown-select">
<a href="javascript:;" class="select-toggle">6<i></i></a>
<div class="select-menu hide">
<div class="scroll-page">
<ul>
<li><a href="javascript:;">12</a></li>
<li><a href="javascript:;">18</a></li>
<li><a href="javascript:;">30</a></li>
<li><a href="javascript:;">All</a></li>
</ul>
</div>
</div>
</div>
<!-- end .dropdown-select -->
</div>
<div class="pull-right">
<span class="texts resultText">Page :</span>
<div class="ratingPagination">
<a href="javascript:;" class="prev-btn-disable">Prev</a>
<span class="pages">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
</span>
<a href="javascript:;" class="next-btn">Next</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- end .page-bar -->
</div>
<!-- end .list-content -->
<div class="grid-content hide">
<div class="row">
<div class="col-md-4" data-ng-repeat="challenge in challenges">
<div class="boxs">
<div class="min-box">
<span class="texts"><a href="challenge-details-private-1.html" class="green-link">CHALLENGES #{{challenge.id}} {{challenge.title}}</a></span>
<span class="texts">
<span class="pull-left"><strong>Type : </strong>{{challenge.challengeType.name}}</span>
<span class="pull-right">{{challenge.createdDate | date: 'longDate'}}</span>
</span>
<span class="texts">
<span class="pull-left">{{challenge.registrationCount}} <strong>Registrans</strong></span>
<span class="pull-right">{{challenge.submissionCount}} <strong>Submissions</strong></span>
</span>
<span class="texts icon-funnel-box">
<span class="texts pull-left"><strong class="icon-blue-funnel"></strong></span>
<span class="texts pull-right"><strong class="icon-golden-trophy">$ {{challenge.awardAmount}}</strong></span>
</span>
</div>
<div class="btn-box">
<a href="javascript:;" data-ng-click="submitSolution(challenge)" data-ng-if="challenge.registered" class="green-btn">SUBMIT</a>
<a href="javascript:;" data-ng-click="details(challenge)" class="green-btn">DETAILS</a>
<a href="javascript:;" data-ng-click="viewSubmissions(challenge)" data-ng-if="challenge.registered && challenge.canViewSubmissions" class="green-btn">VIEW</a>
<a href="javascript:;" data-ng-click="register(challenge)" data-ng-if="!challenge.registered" class="green-btn">REGISTER</a>
</div>
</div>
</div>
<!-- end .col-md-4 -->
</div>
<!-- end .row -->
<div class="page-bar">
<div class="pull-left">
<span class="texts">View :</span>
<div class="dropdown-select">
<a href="javascript:;" class="select-toggle">6<i></i></a>
<div class="select-menu hide">
<div class="scroll-page">
<ul>
<li><a href="javascript:;">12</a></li>
<li><a href="javascript:;">18</a></li>
<li><a href="javascript:;">30</a></li>
<li><a href="javascript:;">All</a></li>
</ul>
</div>
</div>
</div>
<!-- end .dropdown-select -->
</div>
<div class="pull-right">
<span class="texts resultText">Page :</span>
<div class="ratingPagination">
<a href="javascript:;" class="prev-btn-disable">Prev</a>
<span class="pages">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
</span>
<a href="javascript:;" class="next-btn">Next</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- end .page-bar -->
</div>
<!-- end .grid-content -->
</div>
<!-- end .tabs-content -->
</div>
</div>
<!-- end .min-content -->
单击select-toggle anchor标记元素时，click事件未触发。更具体地说，下面的代码不起作用
// JavaScript Document
$(document).ready(function () {
// #slider-range
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 100,
values: [ 0, 100 ],
slide: function( event, ui ) {
$( "#amountMin" ).val( "$ " + ui.values[ 0 ]+"K");
$( "#amountMax" ).val( "$ " + ui.values[ 1 ]+"K");
}
});
$( "#amountMin" ).val( "$ " + $( "#slider-range" ).slider( "values", 0 )+"K");
$( "#amountMax" ).val( "$ " + $( "#slider-range" ).slider( "values", 1 )+"K");
// click on Filter button
$(".filter-btn").click(function(){
$(".filter-content").toggleClass("hide");
$(".filter-content").height($(".tabs-content").height()+15+2);
});
// click on close button in Filter popup
$(".filter-content .icon-close-btn").click(function(){
$(".filter-content").addClass("hide");
});
// click on List icons
$(".icon-list").click(function(){
$(".icon-list").addClass("icon-active");
$(".icon-grid").removeClass("icon-active");
$(".list-content").removeClass("hide");
$(".grid-content").addClass("hide");
$(".filter-content").addClass("hide");
});
// click on Grid icons
$(".icon-grid").click(function(){
$(".icon-list").removeClass("icon-active");
$(".icon-grid").addClass("icon-active");
$(".list-content").addClass("hide");
$(".grid-content").removeClass("hide");
$(".filter-content").addClass("hide");
});
// click Reset button in Filter popup
$(".reset-btn").click(function(){
$(".filter-content .input-box input").val("");
$("#select-challenge-type").html(" <i></i>");
$( "#slider-range" ).slider({
values: [ 0, 100 ]
});
$( "#amountMin" ).val( "$ 0K");
$( "#amountMax" ).val( "$ 100K");
});
// click Apply Filter button in Filter popup
$(".apply-filter-btn").click(function(){
$(".filter-content").addClass("hide");
$(".filter-lists-content").removeClass("hide");
$(".filter-lists-content ul li").removeClass("hide");
});
// click Close button of Filter lists
$(".filter-lists-content .icon-filter-lists-close-btn").click(function(){
$(".filter-lists-content").addClass("hide");
});
// click Close button of Filter item in Filter lists
$(".filter-lists-content ul li .icon-filter-close-btn").click(function(){
$(this).parent().addClass("hide");
if($(".filter-lists-content ul li").length == $(".filter-lists-content ul li.hide").length)
{
$(".filter-lists-content").addClass("hide");
}
});
// change the state of "Have read and agree with this terms" checkbox
$(".agree-terms-checkbox").on("change", function(){
if($(this).is(":checked")){
$(".register-submit-btn").removeClass("disabled");
}else{
$(".register-submit-btn").addClass("disabled");
}
});
// click Submit button in Registration page
$(".register-submit-btn").click(function(){
if(!$(this).hasClass("disabled"))
window.location.href="challenge-details-private-2.html";
});
// init the scrollbar of dropdown popup
if($('.scroll-page').length>0){
$('.scroll-page').jScrollPane({
verticalDragMinHeight:25,
verticalDragMaxHeight:25
});
}
// click dropdown to show popup
$(".dropdown-select .select-toggle").click(function(){
if($(this).parent().find(".select-menu").hasClass("hide"))
{
$(this).parent().find(".select-menu").removeClass("hide");
$(this).parent().find(".select-menu").prev().addClass("shadow");
}
else
{
$(this).parent().find(".select-menu").addClass("hide");
$(this).parent().find(".select-menu").prev().removeClass("shadow");
}
});
// click outside of dropdown popup
// $('body').click(function(evt) {
// if($(evt.target).parents('.dropdown-select').length>0)return;
// $(this).parent().find(".select-menu").addClass("hide");
// });
// click item in dropdown popup
$(".dropdown-select .scroll-page ul li").click(function(){
$(this).parents(".select-menu").addClass("hide");
$(this).parents(".select-menu").prev().removeClass("shadow");
$(this).parents(".select-menu").prev().html($(this).find("a").html()+"<i></i>")
});
// fix the height issue of list view rows
if($(".list-content .col-md-8").length>0)
{
var lists = $(".list-content .col-md-8");
for(var i=0;i<lists.length;i++)
{
lists.eq(i).next().height(lists.eq(i).height()+14);
lists.eq(i).next().next().height(lists.eq(i).height()+14);
}
}
$(".filter-content").addClass("hide");
$(".grid-content").addClass("hide");
$(".select-menu").addClass("hide");
});
我从12个小时开始在墙上敲我的头，但我无法弄清问题是什么。
答案 0 :(得分：0)
我测试了你提到的具体部分并且它正在工作 - 点击事件正在解雇：
http://codepen.io/luciopaiva/pen/KpZmea?editors=101
HTML：
<div class="dropdown-select">
<a href="javascript:;" id="select-challenge-type" class="select-toggle"> <i></i></a>
</div>
使用Javascript：
// click dropdown to show popup
$(".dropdown-select .select-toggle").click(function() {
console.info('test');
});
它必须是别的东西。也许其他一些元素在锚点上，阻止它接收点击事件。