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>
Related
I'm using WPBakery Page Builder for tabs. And I want to show a text block outside the tab section (on a diferent row) with a specific class when first tab with href #1521496635357-e8313acf-e8c2 is open and another text block when the secound tab with href #1521496635380-99d0c08b-67d8 is open (and the first text block to be hidden).
Can you give me a hint with CSS or JS?
Thank you!
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX STANDARD</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#1521496635380-99d0c08b-67d8" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX BUDGET</span>
</a>
</li>
</ul>
Your example is not entirely clear to me, but you should be able to add event listeners to your tabs:
<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta" onclick="doSomething()">
In your page javascript, you could have a function that does something:
function doSomething() {
document.getElementsByClassName("myclass")[0].style.display = "none";
document.getElementsByClassName("myotherclass")[0].style.display = "inline";
}
You could certainly handle this better by introducing jquery or another framework to simplify some of this handling, but depending on your situation that may or may not be feasible.
I am working through an issue where I have a menu that is mutli levels deep. I am trying to get it so that if a first level element is clicked (add class .ubermenu-active) it will look for any other first level element with that class and remove it.
$('.ubermenu-item-level-0 span').on('click',function() {
var target = $('.ubermenu-item-level-0');
$('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
});
HTML (mock):
<ul class="ubermenu">
<li class="ubermenu-item-level-0">
<a class="ubermenu-target">
<span class="ubermenu-target-title">Level 1</span>
</a>
<ul class="ubermenu-submenu">
<li class="ubermenu-item-level-1">
<a class="ubermenu-target">
<span class="ubermenu-target-title">Level 2</span>
</a>
</li>
<li class="ubermenu-item-level-1">
<a class="ubermenu-target">
<span class="ubermenu-target-title">Level 2</span>
</a>
<ul class="ubermenu-submenu">
<li class="ubermenu-item-level-2">
<a class="ubermenu-target">
<span class="ubermenu-target-title">Level 3</span>
</a>
</li>
</ul>
</li>
</ul>
<li class="ubermenu-item-level-0">
<a class="ubermenu-target">
<span class="ubermenu-target-title">Level 1</span>
</a>
</li>
</li>
</ul>
Right now if any of the sub elements are clicked the parent closes
Currently your target var is selecting all elements with class .ubermenu-item-level-0, so when you toggle the class you're toggling all parent elements. Your target var should be something relative to the element clicked, like var target = $(this).closest('.ubermenu-item-level-0');
So, your sample HTML isn't what I expected to see . . . specifically, your second <li class="ubermenu-item-level-0" . . . element is currently showing as a child under the first one, while your description makes it sound like they should be siblings.
For the sake of the solution I'm going to assume that those two lis are supposed to be siblings of each other and that somehow the code got mixed up. :)
So, here's how I would handle it . . .
var sFirstLevelMenuClass = ".ubermenu-item-level-0";
var sActiveMenuClass = "ubermenu-active";
var $firstLevelMenuOptions = $(".ubermenu").find(sFirstLevelMenuClass);
$firstLevelMenuOptions.children("a").children("span").on("click", function() {
$firstLevelMenuOptions.removeClass(sActiveMenuClass);
$(this).closest(sFirstLevelMenuClass).addClass(sActiveMenuClass);
});
Basically, I've simplified your logic and fixed one small issue that you had in your jQuery code.
Detailed Explanation
The issue was that when you used $('.ubermenu-item-level-0 span') as your selector for your change event. That translates to "any span element that is a descendant of a ubermenu-item-level-0 element". So, in addition to the spans that are directly under the ubermenu-item-level-0 list items, it was also picking up the ones under the ubermenu-item-level-1 and ubermenu-item-level-2 elements, since they are also descendants.
So, I changed your selector to $firstLevelMenuOptions.children("a").children("span") which translates to "all spans, that are direct children of an a, that is the direct child of an ubermenu-item-level-0 element" (Note: $firstLevelMenuOptions is set to equal $(".ubermenu").find(".ubermenu-active"); through the logic earlier in the code). This stops the selector from picking up the lower level spans.
Outside of that and trimming down some of your selectors to be more efficient, the only other thing that I changed was the flow of how the ubermenu-active class is manipulated. In my solution, there are two steps:
Remove ubermenu-active from ALL ubermenu-item-level-0 elements
Add ubermenu-active to the closest ubermenu-item-level-0 element to the span that was clicked (i.e., $(this))
That basically resets the list and then reselects the appropriate menu item to me active.
You can stop the event propagation:
event.stopPropagation()
Without seeing the full HTML, I was going to suggest trying this:
$('.ubermenu-item-level-0 span').on('click',function(e) {
e.stopPropagation();
var target = $('.ubermenu-item-level-0');
$('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
});
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()
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.
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
});