[英]Calling a function by a specific div's elements is not working in jQuery
I have a accordion menu, where I have some links in some div with id.我有一个手风琴菜单,其中有一些带有 id 的 div 中的链接。 Here I have two div with id=collapseThree and id=collapseFour.
这里我有两个 id=collapseThree 和 id=collapseFour 的 div。 Now I want a simple alert when any link element of collapseFour div is clicked.
现在,当单击 collapseFour div 的任何链接元素时,我想要一个简单的警报。 But no alert or console.log.
但没有警报或console.log。
Here are my attempts.这是我的尝试。 My view:
我的观点:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large">
</span>Hospital</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'hospitalMember')}">Hospital Member</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large">
</span>Somiti</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'jointMember')}">Somiti Member</a>
</td>
</tr>
</table>
</div>
</div>
</div>
My jQuery code:我的 jQuery 代码:
$(document).ready(function () {
console.log("ready");
$("#collapseFour").on("click", ".link-item", function() {
console.log("Clicked");
});
})
All I want to view the Clicked
text.我只想查看
Clicked
文本。
Since the span
element with link-item
class is not a parent of the clicked element, your code won't work properly.由于带有
link-item
类的span
元素不是单击元素的父元素,因此您的代码将无法正常工作。 You can either move the closing tag of the span
after the a
element or use .next()
function to refer to the next element just right after the span
.您可以将
span
的结束标记移动到a
元素之后,也可以使用.next()
函数来引用span
之后的下一个元素。
<span class="glyphicon glyphicon-asterisk link-item">
<a href="${createLink(controller: 'jointMember')}">Somiti Member</a>
</span>
$(document).ready(function() { console.log("ready"); $("#collapseFour .link-item").click(function(e) { e.preventDefault(); console.log("Clicked"); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large"> </span>Hospital</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-asterisk link-item"></span><a href="${createLink(controller: 'hospitalMember')}">Hospital Member</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large"> </span>Somiti</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <span class="glyphicon glyphicon-asterisk link-item"><a href="${createLink(controller: 'jointMember')}">Somiti Member</a></span> </td> </tr> </table> </div> </div> </div>
I solve the issue as follow :我解决问题如下:
$(document).ready(function () {
$(".link-item").next().click(function(e) {
var currId = $(this).closest(".collapse").attr("id");
localStorage.setItem("currItem", currId);
});
$("#" + localStorage.getItem("currItem")).collapse('show')
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.