Issue
jQuery selector cannot seem to find some of my elements. After spending some time, I have realized that the same code will work with less characters in the id name of the elements. I have concluded that the maximum character length accepted by the selector is 22.
I have not found any informations on such limits anywhere.
<div id="article-skills-analyst-icon"><p>hello first div</p></div>
<div id="article-skills-analyst"><p>hello second div</p></div>
<div id="article-skills-analysti"><p>hello third div</p></div>
These won't work:
$(`#article-skills-analyst-icon`).bind(`click`, function (e) {
console.log('triggered');
});
$(`#article-skills-analysti`).bind(`click`, function (e) {
console.log('triggered');
});
This will work
$(`#article-skills-analyst`).bind(`click`, function (e) {
console.log('triggered');
});
Note that all elements can be found in the css
#article-skills-analyst-icon, #article-skills-analysti, #article-skills-analyst {
cursor: pointer;
}
Solution
It seems to work in the snippet using jQuery. You're probably trying to bind the event before the element exists. You could wrap your binding to wait for the onload event, move your script to the bottom of the page, or defer it.
$(`#article-skills-analyst-icon`).bind(`click`, function (e) {
console.log('triggered');
});
$(`#article-skills-analysti`).bind(`click`, function (e) {
console.log('triggered');
});
$(`#article-skills-analyst`).bind(`click`, function (e) {
console.log('triggered');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="article-skills-analyst-icon">
<p>hello first div</p>
</div>
<div id="article-skills-analyst">
<p>hello second div</p>
</div>
<div id="article-skills-analysti">
<p>hello third div</p>
</div>
Answered By - async await
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.