I'm trying to use a .change() on this select, but I'm having trouble. I can't seem to get it to work.
<div class='btn-group twoColumn js-filter'>
<button class='btn btn-info disabled'>Category</button>
<a class='btn dropdown-toggle' data-toggle='dropdown' href='#' id='test'>
<span class='btn_selected_value data-point-category'>
All
</span>
<span class='caret'></span>
</a>
<ul class='dropdown-menu'>
<li class='selectAll'>
<a class='filter' data-filter='#filterCategoryId' data-value='All' href='#'>All</a>
</li>
<li>
<a class='filter' data-filter='#filterCategoryId' data-value='test333' href='#'>test333</a>
</li>
</ul>
</div>
This console.log is not being fired:
$('.data-point-category').on('change', function() {
console.log("what")
});
Where should I be placing the .data-point-cateogry class so I can use it via jQuery?
The change event will not fire on HTML changing.
From the jQuery documentation:
The change event is sent to an element when its value changes. This
event is limited to <input> elements, <textarea> boxes and <select>
elements. For select boxes, checkboxes, and radio buttons, the event
is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.
Instead, you want something like the following:
$('.filter').on('click', function() {
console.log("what")
});
This would do what you want every time the dropdown option is clicked, which is practically the same as the value changing.
Related
I have a side menu that when clicked slides out to reveal a content panel. Based on the menu item clicked I obviously need different stuff to populate in the panel.
I wrote a function to operate the menu/panel and it partially works. However, I am trying to determine what to load based on event.target.id (as the function takes event) but it only has a value when I click very close to the edges of the linked square. When I click near the actual text which are h1 and h6 and have no id's it doesn't work.
Live demo (click near the edges of the 'Styles' square and then in the middle): http://jsfiddle.net/mANuD/
<div id="application-frame">
<div class="panel"></div>
<ul id="slide-out-menu">
<li>
<a href="#" class="item" id="styles-menu">
<h1>S</h1>
<h6>Styles</h6>
</a>
</li>
<li>
<a href="#" class="item" id="designers-menu">
<h1>D</h1>
<h6>Designers</h6>
</a>
</li>
<li>
<a href="#" class="item" id="code-menu">
<h1>C</h1>
<h6>Code</h6>
</a>
</li>
<li>
<a href="#" class="item" id="help-menu">
<h1>?</h1>
<h6>Help</h6>
</a>
</li>
</ul>
</div>
How can I fix/improve this so that it doesn't matter where in the linked area I click?
Change event.target.id to event.currentTarget.id or this.id.
The event.target is always the deepest element clicked, while event.currentTarget or this will point to the element to which the handler is bound, or to the element that the delegate selector matched.
It sounds like there's a border or padding on some of the descendant elements, and so event.target is a descendant of the element on which the handler is (effectively) hooked up.
Two options:
Use this.id to get the id of the element the handler was (effectively) bound to. This usually does what you want. Updated Fiddle
I don't think you need it in this situation, but the other handy tool in the toolkit for this is closest, which finds the first element matching a selector by looking at the element you give it, then its parent, then its parent, etc. So for instance, $(this).closest(".item").attr("id") or $(event.target).closest(".item").attr("id") (since the items you want have class item). Updated Fiddle But again, I believe #1 is what you want in this case.
I have this input field:
<div class="btn-group btn-xs" dropdown>
<input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New Field" focus-me="true">
</input>
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="item in availableFields | iwSearch: available_fields_query">
{{item | toUserListHeader}}
</li>
</ul>
</div>
And if I click it(click on input) everything is working, dropdown/search/model/filter works, but if I focus it with Tab it does nothing, so I guess there is a difference between clicking on an element and focusing it with a tab.
How can I trigger all the same functions with a tab select, like if I was clicking on an element?
As #ThibaudL pointed out, the click event differs from the focus event since it triggers the focus event as well whereas the focus does not trigger the click.
If you want to call addField(item) on both events, I suggest using ng-focus instead of ng-click.
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>
I have a side menu that when clicked slides out to reveal a content panel. Based on the menu item clicked I obviously need different stuff to populate in the panel.
I wrote a function to operate the menu/panel and it partially works. However, I am trying to determine what to load based on event.target.id (as the function takes event) but it only has a value when I click very close to the edges of the linked square. When I click near the actual text which are h1 and h6 and have no id's it doesn't work.
Live demo (click near the edges of the 'Styles' square and then in the middle): http://jsfiddle.net/mANuD/
<div id="application-frame">
<div class="panel"></div>
<ul id="slide-out-menu">
<li>
<a href="#" class="item" id="styles-menu">
<h1>S</h1>
<h6>Styles</h6>
</a>
</li>
<li>
<a href="#" class="item" id="designers-menu">
<h1>D</h1>
<h6>Designers</h6>
</a>
</li>
<li>
<a href="#" class="item" id="code-menu">
<h1>C</h1>
<h6>Code</h6>
</a>
</li>
<li>
<a href="#" class="item" id="help-menu">
<h1>?</h1>
<h6>Help</h6>
</a>
</li>
</ul>
</div>
How can I fix/improve this so that it doesn't matter where in the linked area I click?
Change event.target.id to event.currentTarget.id or this.id.
The event.target is always the deepest element clicked, while event.currentTarget or this will point to the element to which the handler is bound, or to the element that the delegate selector matched.
It sounds like there's a border or padding on some of the descendant elements, and so event.target is a descendant of the element on which the handler is (effectively) hooked up.
Two options:
Use this.id to get the id of the element the handler was (effectively) bound to. This usually does what you want. Updated Fiddle
I don't think you need it in this situation, but the other handy tool in the toolkit for this is closest, which finds the first element matching a selector by looking at the element you give it, then its parent, then its parent, etc. So for instance, $(this).closest(".item").attr("id") or $(event.target).closest(".item").attr("id") (since the items you want have class item). Updated Fiddle But again, I believe #1 is what you want in this case.
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
});