The goal
Change status when I click in the child (<i>) of an element (<li>)
The problem
Nothing happens when I click in <i>, that is child of <li>.
Details
I'm using AngularJS with ng-click. See:
<li ng-click="openNavigator($event)">
<i class="ico ico-home"></i>
</li>
Update
Guys, you are right — it's working! The problem, actually, is a little bit further.
See this jsFiddle. If you click exactly on the button, the console retrieves back to you a specific result; otherwise, if you click exactly on the icon, you get another response from $event.target.
This behavior isn't good for me — it's flimsy. In my real application I need to work with parents, siblings, etc. and that incosistence unleashes expected, but unwanted, results.
Can you all see my problem? If so, ideas?
Thanks in advance!
HTML
<div ng-app='currentApp' ng-controller='ACtrl'>
<li class="btn btn-primary">
<i class="fa fa-phone" ng-click="openNavigator($event)"></i>
</li>
</div>
CONTROLLER
currentApp.controller('ACtrl', ['$scope', function ($scope, $event) {
$scope.openNavigator = function($event) {
var target = $event.target['parentElement' || 'patentNode'];
console.log('li parent', target);
}
}]);
Since the i tag is a child of the li and the click event is inconsistent, then I suggest you target the i tag on click and then grab the parent. You can say it's the bubbling down, which is correct, So to fix it target the i and it won't bubble up.
The main reason this is an issue is because AngularJS doesn't have event delegation functionality like jQuery does, so you can't specifically target the li tag.
The fiddles been updated too!
JSFIDDLE
It should work. Here is a plunker
Related
I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.
I have this problem which I cannot solve and I have wasted all day trying to find a solution. I am writing automated end to end tests with jebb, I want to trigger the click even on this element
<a class="btn-facebook btn-social-icon" ng-click="signIn()">
<div class="ico_line"></div>
<span class="icon-group-align ng-binding">
Facebook Login
</span>
</a>
the problem is that $('.btn-facebook').click() works on ALL browsers except for Safari.
I have tried the following but none of it has worked:
1) used $('.btn-facebook')[0].click();
2) making a javascript event and dispatching this event on click
3) cursor: pointer for the a element
I have also added an href="#" which makes the click work but this is not desired behavior. It just confirms that the problem is with ng-click and not the element.
Any help would be greatly appreciated!
I am customising this nice website template and in the #profile section I would like to add a textual link pointing to another section, #contact. I first tried the simple solution:
my text
But it doesn't work.
I then tried to understand how to make this textual link trigger the same jQuery event as when you click on a section button; however, being a complete newbie, I have so far failed. In particular, my efforts have focused on inserting an onclick event into the <a> tag, as it is mentioned here, but without success.
Do you have some solution for this? :-) I am sure this is probably something trivial for someone who knows JavaScript; sorry for wasting your time.
You need to do 2 steps:
1) Add new <li> to <ul id="menu">
<li><a class="newtab" href="#newtab" title="New Tab">New Tab</a><span>Get in touch</span></li>
2) Add new div into <div id="content">
like <div id="newtab" class="section">Content goes here</div>
Other way
add function to your javascript section
function showTab(tabname)
{
$("ul#menu li.active").removeClass("active");
$('.'+tabname).parent().addClass("active");
$(".section").slideUp();
$($('.'+tabname).attr("href")).slideDown('slow');
return false;
}
and add to link my text
From what I understand I think what you want is to add onclick event on tag which will execute a function.
Then you should try the following:
Run JavaScript Code
And myJsFunc be like:
function myJsFunc() {
//Some code
return false;
}
I have a change that lists records from a database, my main page uses a second page to load information from it. I want the user to be able to click an 'x' and be able to delete the record.
So i have my main page 'index.php' and i have the loader page that is called 'get_results.php'
So when i load index.php, the JS loads and then goes to get_results.php and then displays the output on the screen, however, when i click the 'x' to try and delete a section it doesn't work. To add to that, i have run the JS script on the get_result.php page and the deleting works just fine.
I can't figure out how to get around this, i assume that it's because the new data (get_results) is being loaded after the index.php document is loaded.
I thought about changing when this data is load but i will still have the same problem because users can click a button and it gets rid of the data and puts new data there.
When the doc is read i run this:
$(".search_results_container").load("get_results.php?service_type=auto #results_output");
This loads the new data into it's container.
Then when the clicks the X it should run this code:
$(".delete_result").on("click", function( e ){
e.preventDefault();
var result_id = $(this).data("delete-id");
// post data to delete page
$.post("delete_results.php?action=delete&result_id=" + result_id, function( data ){
// Out delete data
console.log(data);
// Refresh list
} );
});
And this is the HTML that is being loaded into the container
<ul class="data_list" id="result_list">
<li>
<div class="result_info">
<a href="?action=edit_result&result_id=5" class="update_links">
<h2>
Test data 1
<small>Testing</small>
</h2>
</a>
</div>
<div class="result_delete_icon">
<a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
<i class="fa fa-times" style="float: right;"></i>
</a>
</div>
</li>
<div class="result_info">
<a href="?action=edit_result&result_id=5" class="update_links">
<h2>
Test data 1
<small>Testing</small>
</h2>
</a>
</div>
<div class="result_delete_icon">
<a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
<i class="fa fa-times" style="float: right;"></i>
</a>
</div>
</li>
I really don't know how to get this working, i'm thinking maybe something needs to be refreshed because it seems like Jquery isn't finding the elements in the dom, but i thought that if i reference the element each time, instead of storing it in a var it would walk through the DOM again to get it.
This isn't doing what you think it's doing:
$(".delete_result").on("click", function( e ){
This is invoking the selector ".delete_result" once, identifying the elements which exist at that time, and attaching the click handler to those elements. Handlers are attached to elements, not to selectors. So any elements added to the page after this code executes won't have click handlers attached to them.
Instead, you're looking to do this:
$(document).on("click", ".delete_result", function( e ){
This still executes only once, but attaches the handler to document (which is unchanging during the life of the DOM). Indeed, any common unchanging parent element in the hierarchy will work in place of document. The second selector, ".delete_result", is used on each event to filter events from selected child elements. Thus, any element added to the document later in the life of the DOM will still "bubble up" its click event to document and be identified by that second selector.
For more examples and information, I've written about this before.
You need to delegate your event http://learn.jquery.com/events/event-delegation/
$(document).on("click", ".delete_result",function( e ){...
I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.
I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.
The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.
// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>
// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
<li class="event_new">[..]</li>
<li class="event_new">[..]</li>
</ul>
I also initialize the dropdown() when i append set the data-toggle attribute. Like this:
$notifications.addAttr('data.toggle', 'notifications-alert')
.dropdown();
I also tried with a manual trigger but still doesent work.
$notifications.addAttr('data.toggle', 'notifications-alert')
.click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
.dropdown();
Any ideas why it is not working?
#EDIT: my mistake, solved. See my answer for details.
All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)