Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});
Related
I am having difficulty trying to keep my drop-down menu open when i click on a sub menu. You would think that Bootstrap would do this right out the box. But i cant find any documentation on it.
here is what i found as a solution:
https://www.bootply.com/rgvY6oPO1J
In my HTML i have this:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Numbers
<ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
And here is whats in my JavaScript:
$("#btn-mynumbers").on("click", function (e) {
e.stopPropagation();
$("#mynumbers").slideToggle("fast");
});
for the most part it works. But I'm going to have a lot of menu items and i don't want to make a on click caller for every sub-menu i create.
So i tried putting
onclick="Toggle(this);"
in
id="btn-mynumbers"
and creating the function:
function Toggle(element) {
event.stopPropagation();
var parentid = element.id;
var childid = $(parentid).children("ul").attr("id");
$(childid).slideToggle("fast");
}
so i can give every sub-menu click the ability to stay open. but the event stopped ALL propagation, even the slideToggle. I don't know how to keep the drop down open when a sub-menu slides down.
It seems like there was an error with the function you made since event would probably be undefined. I changed it to something like below. But you can see it in action with the codepen link below.
$(".submenu").on("click", function (event) {
event.stopPropagation();
var target = event.currentTarget;
$(target).siblings('ul').slideToggle("fast");
});
The best approach if you don't want to put an id for every possible menu item that has a sub-menu, then work with classes. That way you don't need to recode.
I made you a codepen that shows how to use classes instead of ids as identifiers. I added a sample of another menu item with a sub-menu for you to play around with.
Hope that helps!
I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot
You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
try to use JQuery Find
$(this).find('strong').text()
Very simple scenario here, I'm hoping there is a simple solution.... Jquery would handle this but for efficiency I want to use the knockout click binding.
<ul>
<li data-bind="click: ShowMyUser">
<span>My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser">Delete Icon</i>
</li>
<ul>
In this example I have a list of Usernames or Email Addresses. What I would like to do, is on the click event of the ROW (e.g. li), show the user details. On the click event of the DELETE icon I would like to show a pop up.
I have both of those methods written and working. My problem is that on clicking the delete icon it ALSO fires the li event.
In order to get round this I have implemented the following:
<ul>
<li>
<span data-bind="click: ShowMyUser">My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser">Delete Icon</i>
</li>
<ul>
However this means that the user must click on the text, I'm not a big fan of this, I think it's un-intuitive.
Any thoughts guys n gals?
KnockoutJS already supports stop bubbling, no need to write it from scratch: http://knockoutjs.com/documentation/click-binding.html (go to Note 4)
Just add clickBubble: false to the child click.
<ul>
<li data-bind="click: ShowMyUser">
<span>My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser, clickBubble: false">Delete Icon</i>
</li>
<ul>
Thank you to Roy J for posting a very helpful link, from that page I found a solution. Firstly I created the following bindingHandler:
ko.bindingHandlers.stopBubble = {
init: function(element) {
ko.utils.registerEventHandler(element, "click", function(event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
};
I then added this to my delete icon so it would not propagate through and call the li click event:
<ul>
<li>
<span data-bind="click: ShowMyUser">My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser, stopBubble: true">Delete Icon</i>
</li>
<ul>
Use binding clickBubble or return false from DeleteMyUser click handler
if you want to have dynamic logic to the bubble but seperated from the click handler you can do
https://jsfiddle.net/h1mrfLe6/
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
I have a list of links generated dynamically, where the elements look like this:
<li id="nod1">
<span>
<a onclick="javascript:getNodeProperties('1');">Element 1</a>
</span>
</li>
<li id="nod2">
<span>
<a onclick="javascript:getNodeProperties('2');">Element 2</a>
</span>
</li>
getNodeProperties() doesn't do anything currently.
I'm trying to make a jquery (or js function), so that when I click an element, a button will appear on it's right side and the button from the previously clicked element will disappear.
I made this jsfiddle to better explain. How can I do it?
Check this, if you want to display button in right side of <a> tag,and if you click on other <a> tag, the all other button should be hidden
window.getNodeProperties = function(nod_id){
$("li").find(".buttonClass").remove();
$("<input type='button'class='buttonClass'>").appendTo("#nod"+nod_id);
}
Since you have told elements are dynamically added you have to use .on(), I would recommend to give a class name to those anchor tags.
$(document).on("click","a",function(){
$("input.active").remove();
$(this).html($(this).html() + "<input class='active' type='button' value='Click me'/>");
});
js
window.getNodeProperties = function(nod_id){
$("#nod"+nod_id).find("span").remove();
$("<input type='button'>").appendTo("#nod"+nod_id);
}
fiddle
You should try and avoid setting the event handlers in your HTML. You can setup an event delegate for the <a> elements so that i will handle the event even if you add more elements, without attaching new event handlers.
DEMO
$(".tree.well").on("click", "li span", function() {
var but = $("<button>");
but.text("New button");
$(this).parent().append(but);
$(this).remove();
});
HTML
<div class="tree well">
<ul>
<li id="nod1">
<span>
<a>Element 1</a>
</span>
</li>
<li id="nod2">
<span>
<a>Element 2</a>
</span>
</li>
<li id="nod3">
<span>
<a>Element 3</a>
</span>
</li>
</ul>
</div>