jquery选择器单击事件未使用angular触发
jquery selector click event not firing with angular
关于这个主题有几个问题,但这个用例不同。我已经阅读了与动态添加DOM元素相关的所有问题的答案,因此我必须使用事件委派。但这不是这里的用例。我在一个DOM元素上添加了一个点击事件监听器,它不是动态添加的。
以下是html页面
<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 -->
下面是jquery脚本
// 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");
});
单击select toggle锚点标记元素时,单击事件不会触发。更具体地说,以下代码不起作用
// 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");
}
});
从12个小时开始,我就一直在撞墙,但我不知道是什么问题。
我测试了您提到的特定部分,它正在工作-点击事件正在启动:
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');
});
它一定是别的东西。也许其他元素在锚点上,阻止它接收点击事件。
相关文章:
- Angular,从指令控制器中的控制器触发函数
- $scope变量发生更改时未触发Angular$watch
- 如何使用非 Angular javascript 触发角度 ng 点击
- 嵌套的Angular指令触发父对象上的作用域函数
- 如何在angular js指令之后触发回调
- Angular在不触发摘要的情况下执行XHR请求
- AngularJS-从Angular外部触发摘要的最佳方法
- Angular promise回调不是在构造函数方法内部触发,而是在对象文本方法中触发
- Angular:$scope有效,但“;控制器为“;不触发ng更改事件
- 当使用angular.js和ui.bootstrap时,从模态内部的按钮单击事件未触发
- 在服务中使用Angular$http在ng点击时触发
- 选择绑定到同一范围的按钮,单击时会相互触发.如何从angular.js中的两个选择列表按钮解除范围绑定
- 在承诺函数从 pouchdb 填充数据之前触发 Ionic/Angular $watch的问题
- Angular 在触发更改时不更新 Ng 类
- 当事件触发时$digest如何由 angular 调用的循环
- 如何在 Angular 测试中触发要解决的承诺
- 使用输入/输出事件在 Angular 2 中的父组件中触发方法
- Angular JS在href加载资源之前触发ng-click
- 带有引导模式的 Angular js - 重新单击事件无法正确触发
- jquery选择器单击事件未使用angular触发