[英]Select anchor tag ID that's dynamically generated using ajax
Problem: I have total 3 tag first for departments, second for their modules and third for their menus.问题:我总共有 3 个标签,第一个是部门,第二个是他们的模块,第三个是他们的菜单。 By using ajax when click on department, department id pass on controller and return modules and the array of modules dynamically append in tag.通过在单击部门时使用 ajax,部门 id 传递控制器并返回模块,模块数组动态附加到标签中。 But the problem encounter where click on these generated modules to get their id and pass to menus controller to get menus.但是遇到的问题是点击这些生成的模块来获取它们的 id 并传递给 menus 控制器以获取菜单。 but unfortunately didn't get the any of data-id.但不幸的是没有得到任何数据ID。
NAVIGATION UI导航界面
<div class="row">
<div class="col-md-2 ">
<h4 class="ml-4">ASFF IT</h4>
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 mt-2 text-right">
<div class="row">
<div class="col-md- header-options">
<img src="{{URL::asset('assets/images/icons/preferences.gif')}}" alt=""><a href="#" class="pr-2 fs-12"> Preferences</a></i>
</div>
<div class="col-md- header-options">
<img src="{{URL::asset('assets/images/icons/lock.gif')}}" alt=""><a href="#" class="pr-2 fs-12"> Change Password</a></i>
</div>
<div class="col-md- header-options">
<img src="{{URL::asset('assets/images/icons/help.gif')}}" alt=""><a href="#" class="pr-2 fs-12"> Help</a></i>
</div>
<div class="col-md- header-options">
<img src="{{URL::asset('assets/images/icons/login.gif')}}" alt=""><a href="#" class="pr-2 fs-12"> Logout </a></i>
</div>
</div>
</div>
</div>
{{-- First Navbar --}}
<nav class="navbar navbar-1 navbar-expand-lg">
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav-1">
@forelse($departments as $department)
<li class="nav-item border-left">
<a class="nav-link departments" type="button" data-id="{{$department->id}}">{{$department->name}}</a>
</li>
@empty
<li class="nav-item border-left">
<a class="nav-link" href="">No Records found</a>
</li>
@endforelse
</ul>
</div>
</nav>
{{-- End First Navbar --}}
{{-- Second Navbar --}}
<nav class="navbar navbar-2 navbar-expand-lg mt-1">
<div class="collapse navbar-collapse">
<ul id="modules" class="navbar-nav nav-2">
</ul>
</div>
</nav>
{{-- End Second Navbar --}}
{{-- Third Navbar --}}
<nav class="navbar navbar-2 navbar-expand-lg mt-1">
<div class="collapse navbar-collapse">
<ul id="menus" class="navbar-nav nav-2">
</ul>
</div>
</nav>
{{-- End Third Navbar --}}
AJAX OF GET MODULES获取模块的 AJAX
$(".departments").on("click",function (){
let department_id = $(this).attr('data-id');
$.ajax({
url: '{{URL::asset('home/modules')}}/'+department_id,
type: 'GET',
success: function (response){
//Empty Module header
$("#modules").empty();
//traverse array
if (response.length != 0){
$.each(response, function (key,value){
// append modules in module header
$("#modules").append('<li class="nav-item border-left">\n' +
'<a class="nav-link abc" type="button" data-id="'+key+'">'+value+'</a>\n' +
'</li>');
});
}else {
$("#modules").append('<li class="nav-item border-left">\n' +
'<a class="nav-link" type="button">No Records found</a>\n' +
'</li>');
}
},
error: function (error){
$("#modules").append('<li class="nav-item border-left">\n' +
'<a class="nav-link" type="button">Error Encounter ! Contact ASFF IT Department</a>\n' +
'</li>');
}
});
});
// Modules Body Ends here
PROBLEM CODE问题代码
$(".abc").on("click", function (e) {
e.preventDefault();
let module_id = $(this).attr('data-id');
console.log(module_id);
});
try this...尝试这个...
$(document).on('click', '.abc', function(e) {
e.preventDefault();
let module_id = $(this).attr('data-id');
console.log(module_id);
});
i dunno when you activate the event click, if you activate the event before the html loaded, the event doesnt see the new class created but,我不知道当您激活事件单击时,如果您在加载 html 之前激活事件,则该事件不会看到创建的新类,但是,
have you try to delegate the event like this: (its ok with dynamic creation)您是否尝试像这样委托事件:(动态创建可以)
$("#module").on("click", ".abc", function (e) {
e.preventDefault();
let module_id = $(this).attr('data-id');
console.log(module_id);
});
you just take a selector parent and delegate the event to the children wanted.你只需要一个选择器父并将事件委托给想要的孩子。 sorry for my english...对不起我的英语不好...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.