I have two ULs in HTML ,one for user and one for shared user.
<div class="container">
<div id="userList" style=" ;width:45%;margin:10px;display:inline-block;vertical-align: top;">
<span>Users</span>
<ul class="usersUL">
<li title="Add user">user1</li>
<li title="Add user">user2</li>
</ul>
</div>
<div id="sharedUsers"style="width:45%;margin:10px;display:inline-block;vertical-align: top;">
<span>Shared Users</span>
<ul class="usersUL" >
</ul>
</div>
</div>
I want to add the li in UL one to the second list on user click and vice versa. The way I have done this is like so
//add to shared users from userslist
$("#userList li").click(function(){
$("#sharedUsers ul").append('<li title="Remove user">'+$(this).html()+'</li>');
//add to users list from shared users
$("#sharedUsers li").click(function(){
$("#userList ul").append('<li title="Add user">'+$(this).html()+'</li>');
$(this).remove();
});
$(this).remove();
});
I know what I doing wrong , I am not adding new event listener once the list item to sent back to the first UL from the second UL.But I am struggling to find the best way I can do this.
Here is the js fiddle: https://jsfiddle.net/4n7Ly4r2/
You can't nest a click event within a click event. Also, you need to bind the click event to the dynamic content using on():
JS Fiddle
$(document).on('click', '#userList li', function() {
$("#sharedUsers ul").append('<li title="Remove user">' + $(this).html() + '</li>');
$(this).remove();
});
$(document).on('click', '#sharedUsers li', function() {
$("#userList ul").append('<li title="Add user">' + $(this).html() + '</li>');
$(this).remove();
});
If you want to bind an event listener to a dynamically created element you need to use jQuery.on, like this $("#userList").on("click", "li", function(){ ... });.
Hope it helps.
Using 'on' or not does not really matter, as long as not defining function on the fly:
$('#userList li').click(relocLi);
$('#sharedUsers li').click(relocLi);
function relocLi() {
if ($(this).attr('title') == "Add user") {
$(this).attr('title', 'Remove user');
$("#sharedUsers ul").append($(this));
} else {
$(this).attr('title', 'Add user');
$("#userList ul").append($(this));
}
}
Related
What this does is it selects the LI items from the list, but I want it to be able to only choose one at a time. For instance if I click Vaje and then Projekt, the Vaje one should revert back to normal and so on and so forth, even for the added user inputs.
$(document).on('click', '.class', function(){
$(this).css("font-weight", 'bold');
$(this).css("text-decoration", 'underline');
$(document).ready(function(){
$("#add").click(function(){
var addItem= $("#dodaj").val();
if(addItem.length > 0){
$("ul").append('<li class="class">'+ addItem + '</li>');
$("#dodaj").val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id = "dodaj" name="additem">
<button id="add" onclick="newElement()">Dodaj</button>
<button id="remove" >Zbriši</button>
<ul id="kategorija" >
<li class="class">Vaje</li>
<li class="class">Treningi</li>
<li class="class">Projekt</li>
</ul>
On the click you are setting "bold" and "underline" for one li, but you are not resetting the other elements. You can change the click event to:
$(document).on('click', '.class', function(){
// reset all li
$('.class').css("font-weight", 'normal');
$('.class').css("text-decoration", 'none');
// now set the current li
$(this).css("font-weight", 'bold');
$(this).css("text-decoration", 'underline');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm trying to build my first "serious" webpage. I have just started and I stuck on applying old event listeners on new div section.
I would like to apply all old listeners on $(".novo").append("new div ..")
I have tried to use on() functions but it doesn't seem to work.
And also I have issues when adding new list. It adds to every present div. I want to add it only on clicked div.
<body>
<button class="novo">Novo</button>
<div class="container">
<div class="grupa">
<h1>To-Do List<span id="form"><i class="fas fa-edit"></i></span></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fas fa-trash-alt"></i></span> Sabah</li>
</ul>
</div>
<script type="text/javascript" src="Assets\JS\projekt.js">
</script>
</body>
jS:
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(key){
if(key.which === 13){
var todoText = $(this).val();
$("ul").append("<li><span><i class='fas fa-trash-alt'></i></span> " + todoText + "</li>");
}
});
$("#form").click(function(){
$("input[type='text']").fadeToggle(150);
});
$(".novo").on("click", function(){
$(".container").append("<div class='grupa'><h1>To-Do List<span id='form'><i class='fas fa-edit'></i></span></h1><input type='text' placeholder='Add New Todo'><ul><li><span><i class='fas fa-trash-alt'></i></span> Sabah</li></ul></div>");
});
Thank You!!
You have to move your .on() bindings to a level higher up. That is because when you apply the .on() bindings to the <ul> element, the said element must be available in the DOM at runtime. That means that the newly added <ul>, triggered by clicking on the .novo button, will not have any JS events bounds to it.
In this case, you should move the binding to a parent element that is already present at runtime, e.g. the .container element. Refactoring your code, you can do this:
$(".container").on("click", ".grupa ul li", function(){
$(this).toggleClass("completed");
});
$(".container").on("click", ".grupa ul span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
});
I have 3 or so button in my page which i need to show a social icon when user clicks on those links.
I used this jQuery
$('.one').on('click', function() {
$('.smenu').not($(this).next()).removeClass('share')
$(this).next().toggleClass('share');
});
<div id="sharing_area">
<ul class='smenu'>
<li class="facebook"><a target="_blank" onclick="return windowpop(this.href, 545, 433)" href="https://www.facebook.com/sharer/sharer.php?u=http://youtu.be/<? echo $id_3 ?>"><i class="icon-facebook"></i></a></li>
</ul>
<span class="one">Share</span>
</div>
I keep getting error, but i don't know what i'm doing wrong.
Can you guys help me out?
Here is my DEMO
There is no .next() element for the span you are clicking! Your UL is before the span, so you need prev():
http://jsfiddle.net/TrueBlueAussie/5dsrk470/5/
$('.one').on('click', function() {
console.log('click');
$('.smenu').not($(this).prev()).removeClass('share')
$(this).prev().toggleClass('share');
});
If you want to remove the class on clicking the links add this delegated event handler:
$(document).on('click', 'a', function(){
$('.smenu').removeClass('share')
});
Looks like you confused prev and next methods:
var $smenu = $('.smenu');
$('.one').on('click', function () {
$smenu.removeClass('share');
$(this).prev().toggleClass('share');
});
Demo: http://jsfiddle.net/5dsrk470/6/
When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/
I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});
You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/
I got a quick question:
I want every link in the div to alert a message, but only the anchors. I dont want the div to initiate the alert function.
Html:
<div id="abc">
<a href='#'> Button 1 </a>
<a href='#'> Button 2</a>
</div>
Javascript:
$(document).ready(function(){
$('#abc').click(function(){
alert('a');
});
});
How do I modify the above code?
Then you could just bind the event handler on the a tag inside the div.
$('#abc a').click(function() {
alert('a');
});
exchanging $('#shortlisting') with $('#shortlisting a') should work for you.
$('#abc a').on("click", function() {
alert('a');
});
Try:
$('#abc a').click(function() {
alert( $(this).text() );
});
Here is an example