I have YUI2's delegate defined as
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
</ul>
</div>
<script>
var foo = function() {
alert("clicked");
};
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
Event.delegate("container", "click", foo, "li");
// jQuery code
$("#li-5").click();
</script>
When I click on the li, alert shown, that is expected. But why the jQuery click() method does not work? Or what is the correct way to simulate the click() delegate?
I have prepare a Live URL for testing: http://jsfiddle.net/ngRvw/
Updates:
I need the alert automatically execute like this one: http://jsfiddle.net/ngRvw/3/ But I need to preserve the original YUI's delegate
Related
I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.
The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).parent().find("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
$(document).ready(function(){
$("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I'm trying to trigger a focusout event on an ul element:
// HTML
<nav>
<ul _v-2e9e2f12="">
<li _v-2e9e2f12="">
<a _v-2e9e2f12="">
</a>
<ul _v-0078ee36="" _v-2e9e2f12="">
<li>List element</li>
<li>List element</li>
<li>List element</li>
</ul>
</li>
</ul>
</nav>
// JS
$(document).ready(function() {
$("a").click(function(ev) {
var $icon = $(ev.currentTarget)
var $menu = $icon.next()
$menu.focus()
console.log('Focus triggered!')
});
$("ul[_v-0078ee36]").focusout(function() {
console.log('Focusout triggered!')
});
})
But .focusout is never triggered.
What's the correct way of doing it?
Here's the JSFiddle.
Elements other than input elements cannot be focused unless you give a tab index to them.
<ul tabindex="-1" _v-0078ee36="" _v-2e9e2f12="">
So if you want to trigger the focus out for a non input element, you have to set its tab index to -1.
DEMO
you know that we can use on events for a class in JQuery.
for instance
$(".example").click(function(){
//the process
})
I am new on Vue.js and I am working on methods in vue.js
Vue use v-on attr to set a method for a element. But I dont want to define attr for all elements whichs use same function.
For Example
<ul class="container">
<li v-on="click:Menu" >Menu 1</li>
</ul>
<ol class="click">
<li v-on="click:Menu" >Menu 1</li>
<li v-on="click:Menu" >Menu 2</li>
</ol>
You must saw, I used v-on attr for all li elements. For li elements it is not problem, I can solve it v-repeat but for some cases, I have to set same function for lots of divs or form. I want to set a class for a function and set a method for the class.
Is there any solution for it?
David's answer is good. But if you don't want to use Jquery, you can use document.querySelectorAll instead of $(this.el).find("li") and then add the click handlers with addEventListener in the directive.
Having said that, you don't have to add event listeners to all the elements in a directive (even though a directive might be the best solution for this). Another approach would be to do what you suggest, put the handlers on the parent elements, and then implement some logic depending on which element the function was called from. Example:
https://jsfiddle.net/q7xcbuxd/33/
<div id="app">
<ul class="UL_items" v-on="click:Menu(1)">
<li>Menu 1 item 1</li>
</ul>
<ol class="OL_items" v-on="click:Menu(2)">
<li>Menu 2 item 1</li>
<li>Menu 2 item 2</li>
<li>Menu 2 item 3</li>
</ol>
<div class="DIV_items" v-on="click:Menu(3)">
lots<br/>
of<br/>
items<br/>
</div>
</div>
var vue = new Vue({
el: '#app',
methods: {
Menu: function(id){
console.log('You invoked function Menu' + id + ' ' +
'by clicking on ' + event.path[0].innerHTML + ' ' +
'which is of type ' + event.srcElement.nodeName + '.\n' +
'The parent element\'s class name is \'' + event.srcElement.parentElement.className + '\' ' +
'which is of type ' + event.srcElement.parentElement.nodeName + '.');
}
}
});
I would write a directive for <ol> and <ul> that adds click handlers for all <li> children.
Something like:
Vue.directive('menu', {
bind: function () {
$(this.el).find("li").on("click", function (event) {
this.menu_click(event);
});
},
update: function (value) {
this.menu_click = value;
},
unbind: function () {
$(this.el).find("li").off("click", this.menu_click);
}
})
And use it like this:
<ul class="container" v-menu="container_click">
<li>Menu 1</li>
</ul>
<ol class="click" v-menu="click">
<li>Menu 1</li>
<li>Menu 2</li>
</ol>
I have a one-page website with a menu like this:
<ul id="menu-menu" class="nav">
<li id="1">Item 1</li>
<li>Item 2
<ul>
<li id="1" class="sub">Item 2-1</li>
<li id="1" class="sub">Item 2-2</li>
<li id="1" class="sub">Item 2-3</li>
</ul>
</li>
<li id="1">Item 3</li>
<li id="1">Item 4</li>
</ul>
The menu is high-lighted by JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
var J = jQuery.noConflict();
J(document).ready(function(){
J('.nav li:first').addClass('current');
J('ul.nav').each(function() {
J(this).find('li#1').each(function(i) {
J(this).click(function(){
J(this).addClass('current');
J(this).siblings().removeClass('current');
});
});
});
});
/* ]]> */
</script>
The problem is that when I click on Item 3 and than on Item 2-2, Item 3 stays high-lighted., and when I than click on Item 1, Item 2-2 stays high-lighted.
Any ideas how to fix this?
var J = jQuery.noConflict();
J(function(){
J('ul.nav li:first').addClass('current');
J('ul.nav li').click(function (e) {
J('ul.nav li.current').removeClass('current');
J(this).addClass('current');
e.stopPropagation(); // prevent the event click from bubbling up
});
});
Untested, but try to replace
J(this).addClass('current');
J(this).siblings().removeClass('current');
with
J('ul.nav .current').removeClass('current');
J(this).addClass('current');
.
The problem is that the sibling selector only finds just that, the siblings, and not the other elements.
HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.