0
Есть несколько вопросов по этой теме, но этот вариант использования отличается. Я прочитал ответы на все вопросы, связанные с добавлением элемента DOM динамически, поэтому мне нужно использовать делегирование событий. Но здесь это не предел. Я добавляю прослушиватель событий щелчка на элемент DOM, который не добавляется динамически.jquery selector click event не работает с угловым
Ниже 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");
});
Когда я нажимаю выбрать-тумблер анкер тега элемента событие щелчка не обжиг. Более конкретно ниже фрагмент кода не работает
// 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 часов, но я не могу понять, в чем проблема.
Этот код необходим для дублирования проблемы? Удалите все эти обработчики событий и элементы html, чтобы вы могли сузить область своей проблемы. – Jasen
Работает для меня. Классы добавляются правильно. Я не уверен, что они делают. Может быть, вы должны упростить свой код. Это не '$ (this) .parent(). Find ('. Select-menu'). Prev()' то же самое, что '$ (this)'? –