What I'm trying to do is add elements to a list at the press of a button, but then be able to delete any item, again, at the press of a button. Here is a minimal working example of what I mean:
$('.delete-item').click(function() {
$(this).parent().text("DELETED")
})
$('button').click(function() {
$('ul').append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>
Here, you can add items to the unordered list and "delete" already existing items, now, what happens is that you can delete the premade items just fine, but if you try to delete an appended item, for whatever reason, you simply can't. How is this fixed? Thanks!
$('.delete-item').click(...) attaches the event listener to existing items only. Use event delegation like so:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
With event delegation you attach the event listener to an ancestor that already exists in the DOM (here the <ul> element) and watch for the event on the descendants whether they already exist or added dynamically.
Demo:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
$("button").click(function() {
$("ul").append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>
Related
I want to insert the (ul) tag that comes after the (div) tag in class (copy1).
Then, by clicking on the tag (div) in the class (copy1), insert the (ul) tag after the tag (div) into the class (copy2). The first step is running the code, but I don't know the second step.
$(document).ready(function() {
$('ul ul').hide();
$('ul div').click(function() {
var x = $(this).next().html();
$('.copy1').html(x);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div>01</div>
<ul>
<li>01-01</li>
<li>
<div>01-02</div>
<ul>
<li>01-02-01</li>
<li>01-02-02</li>
<li>01-02-03</li>
</ul>
</li>
<li>01-03</li>
</ul>
</li>
<li>
<div>02</div>
<ul>
<li>02-01</li>
<li>02-02</li>
<li>02-03</li>
</ul>
</li>
</ul>
<hr>
<ul class="copy1"></ul>
<ul class="copy2"></ul>
After clicking on the first div tag, the following values are inserted into the copy1 class.
01-01
01-02
01-03
But by clicking on 01-02 the following values
01-02-01
01-02-02
01-02-03
Those that are in the copy1 class are not copied to the Copy2 class.
Because the elements in .copy1 are created dynamically, you either need to add events after they are created or use event delegation
$(document).on("click", ".copy1 div", function() { ...
as you want copy1->copy2, it needs to be separate from the src->copy1 code (or have additional logic within the click handler).
In the snippet below, I've kept them separate for clarity. I've also added some css to show which ones can be clicked as it was slightly confusing that 01-01 does nothing as there are no child nodes.
$(document).ready(function() {
$('ul ul').hide();
$('ul div').click(function() {
var x = $(this).next().html();
$('.copy1').html(x);
})
$(document).on("click", ".copy1 div", function() {
var x = $(this).next().html();
$('.copy2').html(x);
});
});
ul div { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div>01</div>
<ul>
<li>01-01</li>
<li>
<div>01-02</div>
<ul>
<li>01-02-01</li>
<li>01-02-02</li>
<li>01-02-03</li>
</ul>
</li>
<li>01-03</li>
</ul>
</li>
<li>
<div>02</div>
<ul>
<li>02-01</li>
<li>02-02</li>
<li>02-03</li>
</ul>
</li>
</ul>
<hr>
<ul class="copy1"></ul>
<ul class="copy2"></ul>
Html
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
My app got a list of things then after 5secs. it will automatically go to the next li.
but that is not the problem. the problem is with the click function I want to know the data-id of the li.
According to the OP's comments
Remove the onclick attribute.
Bind the click event using jQuery.
Use closest('li') to get the parent of your links.
function clickFunction(e) {
e.preventDefault(); // This is to prevent the execution of your links!
console.log($(this).closest('li').data('id'));
}
$('a').click(clickFunction);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-id="1">
1
</li>
<li data-id="2">
2
</li>
<li data-id="3">
3
</li>
<li data-id="4">
4
</li>
<li data-id="5">
5
</li>
</ul>
(1) Remove onclick attribute.
(2) Attach a .click handler to all your links
$(function () {
// attach an onclick event handler to your links
$('li a[data-id]').click(function (e) {
// prevent the link from going anywhere
e.preventDefault();
// get the parent li
var li = $(this).closest('li');
// get next li's link data id
console.log(li.next('li').find('a').data('id'));
});
});
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
I am not sure if loop is the right term, but I have a products page that is working perfectly. I want to be able to have an " Add product option button" that when the admin clicks on it, it toggles down and another "Add products option button" replaces the one i just opened. So the number of products options is unlimited, the user will be able to add as many products as they like.
<!--Restaurant toggle-->
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');">
<h3 id="open">Your Restaurants</h3>
</a>
<div id="Rest" class="Rest_new" style="display: none;"><div>
<ul class="tabs1">
<!--
<li id="order" class="rred">
restaurant
</li>
-->
<li id="order_open" class="rgreen">
New restaurant
</li>
</ul>
</div>
</div>
<!-- add element-->
<script>
$(document).on('click', 'li#order_open', function() {
$(this).before('<li>New restaurant</li>');
// add to localsorage?
window.onload = function() {}
var order_open = $('div#Rest').html();
localStorage.setItem('div#Rest', order_open);
});
</script>
I am using the following code at the moment. It creates unlimited options however, i can not open the options, i cannot make it toggle and it disappears on page refresh. Is there a better way to do this.
You question is javascript. You could use
$('container').append('html content');
See an example:
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
See more
http://www.w3schools.com/jquery/jquery_dom_add.asp
To create additional restaurants, you can use jQuery's append function to add the link. Then use localstorage to store and retrieve the number of links created.
HTML
<h3 id="open">Your Restaurants</h3>
<div class="Rest_new" id="rest">
<div>
<ul class="tabs1" id="optionContainer">
</ul>
</div>
JavaScrtipt
var options = parseInt(localStorage.getItem('numberOfOptions'));
if(isNaN(options)) { options = 0; }
function addOption(n) {
$('#optionContainer').append('<li class="rgreen" id="order_open'+n+'">New restaurant '+n+'</li>');
}
$(document).ready(function(){
for(var i = 0; i < options; i++) {
addOption(i);
}
$('#open').on('click',function() {
addOption(options);
options++;
localStorage.setItem('numberOfOptions',parseInt(options));
})
});
You can see it working here: https://jsfiddle.net/igor_9000/pm4Lv44t/1/
Hope that helps!
I would like to add and then remove elements / items from a jQuery UI sortable list...
What am I doing wrong?
I've tried here
<div class="add">Click me to add new item to list</div>
<ul id="sortable">
<li class="delete">
<div class="item">these old items can be removed by click on them...</div>
</li>
<li class="delete">
<div class="item">these old items can be removed by click on them...</div>
</li>
<li class="delete">
<div class="item">these old items can be removed by click on them...</div>
</li>
</ul>
$("#sortable").sortable();
$(".add").click(function () {
var newItem = '<li class="delete"><div class="item">these <span>new items cannot be removed</span> by click on them...</div></li>';
$("#sortable").append(newItem);
$("#sortable").sortable("refresh");
});
$(".delete").click(function () {
$(this).remove();
});
change
$(".delete").click(function () {
$(this).remove();
});
to
$("#sortable").on('click', ".delete", function () {
$(this).remove();
});
The elements are inserted dynamically and doesn't exist when you attach the event handler, so you have to delegate up to a parent that does exist when you attach the handler.