How to programmatically change the click event from a html element - javascript

I will try to explain my problem followed by an example:
I'm wondering to switch li position and make them behave like the li that was already there:
Here's the sample:
I would like to click in the left column li change the place and then behave just like any other li from right column....
If you try to click back the li won't go back to the left column.
please help
$('ul.my-list-left li').on('click',function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$('ul.my-list-right li').on('click',function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>

Delegate the events so that newly appended elements get the event bound when they are moved from column to column:
$('ul.my-list-left').on('click', 'li', function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$('ul.my-list-right').on('click', 'li', function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});

use $(document).on() to also take into account newly bounded DOM elements
$(document).on('click', 'ul.my-list-left li' ,function () {});
$(document).ready(function() {
$(document).on('click', 'ul.my-list-left li' ,function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$(document).on('click', 'ul.my-list-right li', function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>

Related

Remove class from list-item on-click anchor link with removeClass

I'm having trouble with removing a class on-click on the Tab 2 list-item. These are links with underlines that show content.
The code so far fairly close, just need a little hand on seeing what I've missed.
<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>
HTML
<div class="mk-tabs">
<ul>
<li class="mk-tabs-tab">Tab 1</li>
<li class="mk-tabs-tab is-active">Tab 2</li>
</ul>
<div class="mk-tabs-panes">
<div class="mk-tabs-pane">Tab Content 1</div>
<div class="mk-tabs-pane is-active">Tab Content 2</div>
</div>
</div>
jQuery
<script type="text/javascript">
jQuery(document).ready(function($){
$('.mk-tabs ul li a').click( function(){
if ( $('.mk-tabs ul li').hasClass('is-active') ) {
$('.mk-tabs ul li').removeClass('is-active');
}
else {
$('.mk-tabs ul li').removeClass('is-active');
}
});
});
</script>
Two varying behaviors ...
jQuery(function($){
$('.mk-tabs').on('click', 'a', function(e){
e.preventDefault();
var container = $(this).closest('.mk-tabs');
var currentTab = $(this).closest('.mk-tabs-tab');
var currentIndex = currentTab.index();
$(".mk-tabs-tab", container).not(currentTab).removeClass('is-active');
currentTab.toggleClass('is-active');
var panes = $('.mk-tabs-pane', container);
panes.hide();
if (currentTab.hasClass('is-active')) {
panes.eq(currentIndex).show();
}
});
});
jQuery(function($){
$('.mk-tabs2').on('click', 'a', function(e){
e.preventDefault();
var container = $(this).closest('.mk-tabs2');
var currentTab = $(this).closest('.mk-tabs-tab');
var currentIndex = currentTab.index();
currentTab.toggleClass('is-active');
$('.mk-tabs-pane', container).eq(currentIndex).show();
var panes = $('.mk-tabs-pane', container);
if (currentTab.hasClass('is-active')) {
panes.eq(currentIndex).show();
} else {
panes.eq(currentIndex).hide();
}
});
});
ul {
display: flex;
list-style: none;
}
.mk-tabs-tab {
padding: 5px 10px;
}
.mk-tabs-tab.is-active{
background-color: red
}
.mk-tabs-pane {
display: none;
}
.mk-tabs-pane.is-active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mk-tabs">
<ul>
<li class="mk-tabs-tab">Tab 1</li>
<li class="mk-tabs-tab is-active">Tab 2</li>
<li class="mk-tabs-tab">Tab 3</li>
<li class="mk-tabs-tab">Tab 4</li>
</ul>
<div class="mk-tabs-panes">
<div class="mk-tabs-pane">Tab Content 1</div>
<div class="mk-tabs-pane is-active">Tab Content 2</div>
<div class="mk-tabs-pane">Tab Content 3</div>
<div class="mk-tabs-pane">Tab Content 4</div>
</div>
</div>
<div class="mk-tabs2">
<ul>
<li class="mk-tabs-tab">Tab 1</li>
<li class="mk-tabs-tab is-active">Tab 2</li>
<li class="mk-tabs-tab">Tab 3</li>
<li class="mk-tabs-tab">Tab 4</li>
</ul>
<div class="mk-tabs-panes">
<div class="mk-tabs-pane">Tab Content 1</div>
<div class="mk-tabs-pane is-active">Tab Content 2</div>
<div class="mk-tabs-pane">Tab Content 3</div>
<div class="mk-tabs-pane">Tab Content 4</div>
</div>
</div>
#farinspace I'm trying this. I think the bug is "closest" on the pane code.
HTML
<div class="mk-tabs">
<ul>
<li class="mk-tabs-tab">Tab 1</li>
<li class="mk-tabs-tab is-active">Tab 2</li>
</ul>
<div class="mk-tabs-panes">
<div class="mk-tabs-pane">Tab Content 1</div>
<div class="mk-tabs-pane is-active">Tab Content 2</div>
</div>
</div>
jQuery
jQuery(function($){
$('.mk-tabs').on('click', 'a', function(e){
e.preventDefault();
var currentTab = $(this).closest('.mk-tabs-tab');
currentTab.toggleClass('is-active');
//if (currentTab.hasClass('is-active')) console.log('on');
//else console.log('off');
if ( currentTab.hasClass('is-active') ) {
$('.mk-tabs .mk-tabs-panes .mk-tabs-pane').toggleClass('is-active');
}
});
});
</script>
jQuery(document).ready(function($){
$('.mk-tabs ul li a').click( function(){
if($($(this).parent()).hasClass("is-active")){
$($(this).parent()).removeClass("is-active")
}
else
{
$(".mk-tabs-tab").each(function(){
$(this).removeClass("is-active")
})
if(!$($(this).parent()).hasClass("is-active"))
$($(this).parent()).addClass("is-active")
}
});
});
.mk-tabs{
display:flex
}
.is-active{
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mk-tabs">
<ul>
<li class="mk-tabs-tab">Tab 1</li>
<li class="mk-tabs-tab is-active">Tab 2</li>
<li class="mk-tabs-tab">Tab 3</li>
<li class="mk-tabs-tab">Tab 4</li>
</ul>
</div>

How to make manually scroll list using jquery?

I want to manually scroll a UL list with two button.
First time 4 items will show and when user click on up or down button list will scroll 1 item a time.
$(document).ready(function() {
$(".down").on("click", function() {
$(".scroll").scrollTop(
$(".listitem:nth-child(4)").offset().top -
$(".listitem:nth-child(3)").offset().top
);
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div></div>
Now i am stuck i don't how i can dynamically pass the next and previous li to make it work . i want to do it exactly like that as i show in down button list scroll to next item.
You can use scrollIntoView() method to scrolls the element into the visible area. Note that :not(:nth-last-child(3)) would be the n - 1 visible list.
$(document).ready(function() {
$(".down").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.next();
if ($target.get(0) && $target.is(':not(:nth-last-child(3))')) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
$(".up").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.prev();
if ($target.get(0)) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem active">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div>
</div>
</div>

Submenu click event is not getting fired up

I have below markup which displays submenus
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li> Report 3</li>
</ul>
Jquery to handle click event is as below
$("#pageSubmenu li a").click(function () {
$(this).children('a').trigger('click');
alert('clicked');
});
What's wrong in my code?
$("#pageSubmenu li a").click(function () {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled collapse show" id="pageSubmenu" style="">
<li>Report 1</li>
<li>Report 2</li>
<li>Report 3</li>
</ul>

Convert a list into accordion

I want to convert my list items in an accordion. But, when I use following code, it seems jQuery is being removed and replaced the link (href) even for a list item which doesn't have any children. For Example - list item 2 and 5. Can anyone help me with this?
$(function() {
var count = 1;
var lisize = $( "ul > li" ).length;
$( "ul > li" ).each(function(){
if (count <= lisize) {
$( "ul > li:nth-child(" + count + ") > a" ).attr ("href", ".collapse"+count);
$( "ul > li:nth-child(" + count + ") > a" ).attr ("data-toggle", "collapse");
$( "ul > li:nth-child(" + count + ") > ul" ).addClass( "collapse collapse"+count );
count++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul>
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>
Added main as id to the main ul wrapper so that you can limit where you iterate from. Also changed the conditional statement to $(this).children("ul").children("li").length > 0 so that the system checks if the ul has children - only then will it add the accordion classes
$(function() {
var count = 1;
var lisize = $("#main > li").length;
$("#main > li").each(function() {
if ($(this).children("ul").children("li").length > 0) {
$(this).children("a").attr("href", ".collapse" + count);
$(this).children("a").attr("data-toggle", "collapse");
$(this).children("ul").addClass("collapse collapse" + count);
count++;
}
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul id="main">
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>
First issue: limit selection to all li having an ul child
$('ul > li:has(> ul)')
Second issue: .each() has two parameters, so you don't need the count variable because you can use the first parameter.
Last note: you may use directly .attr( attributes ) in order to set two attributes for the anchor instead of calling .attr() method twice.
The snippet:
$('ul > li:has(> ul)').each(function (idx, ele) {
$(ele).children('a').attr({"href": ".collapse" + idx, "data-toggle": "collapse"});
$(ele).children('ul').addClass("collapse collapse" + idx);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul>
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>

How to add an ul element custom event with jQuery?

I have a draggable pair of lists. The design: 2 ul list, interchangable items, with drag and drop.
I am using jquery sortable widget.
The question is that i want to fire an event when an li item drops in the or fire some event when ul list change.
How can i do that??
HTML:
div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
JavaScript:
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
})
Please check below snippet. Used stop and receive two events. Stop event will trigger every time element dragged and dropped. And receive event will trigger only when element is moved from one list to another.
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" moved");
},
receive: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" Moved from another list");
},
}).disableSelection();
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
Contrary to my comment above, use 'stop' instead of 'drop':
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(){
alert("yeah buddy");
}
}).disableSelection();
})
https://jsfiddle.net/0yw43n6w/

Categories