We Keep Coding

HTML JS - Disable clicking possibility through the CSS class

,hello Gentlemann please
1° How can i disable the click Behavior onclick through the css class please?
2° I can't use ID in the HTML Element because i'm not able to insert any ID in the code, so i need to use the Class the make the magic happen.
3° In all my Tries, none of them still works.
Element and CSS Class that i need to disable if clicked:
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
Class: label.inner.all.disabled.reserved.my_numbers
1° First Try:
jQuery(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
2° Second Try:
$(document).ready(function() {
$(".label.inner.all.disabled.reserved").click(function() {
$("label").off("click");
});
});
3° Third Try:
$(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
4° Try:
$('#inner.all.disabled.reserved.my_numbers').disabled = true

I find it best to use the Event. You can use .preventDefault() to stop the event action.
Example:
$(function() {
function preventClick(e) {
e.preventDefault();
console.log(e.target.nodeName + " Click Prevented");
return false;
}
$("label.inner.all.disabled.reserved").click(preventClick).children().click(preventClick);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>

I specially registered the console.log() so that you could see that the click can be done only once.
Was it necessary?
$(".inner.all.disabled.reserved").click(function(){
console.log('This message will not show!');
}).off('click');
.inner.all.disabled.reserved:hover {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>

Load div on the page one by one

<script>
$(document).ready(function(){
$( "#clr" ).each(function(i) {
$("#clr"+id).fadeOut(0).delay(1000*i).fadeIn(1850);
)};
});
</script>
<div class="row" id="clr">
<span class="textstyle">WISHINDIA</span>
<span class="textstyle">SHOUTIT</span>
<span class="textstyle">SNAKE</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
</div>
</div>
I'm trying to load div one after another with some delay but unable to do so please help to do this

First of all, you would need to fix the syntax errors around the anonymous function passed to the .each function. Basically your closing ) bracket for .each should come after the closing } of the anonymous function passed to it.
Then, instead of iterating on #clr, you should be iterating over #clr > a - meaning on the anchor tags rather than the div element.
Also you don't have to specify the selector inside the .each function. You can instead refer to the elements using $(this).
Finally, you can either refer to the index of element inside .each as id or i. In the snippet below I have used id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clr > a").each(function(id) {
$(this).fadeOut(0).delay(1000 * id).fadeIn(1850);
});
});
</script>
<div class="row" id="clr">
<span class="textstyle">WISHINDIA</span>
<span class="textstyle">SHOUTIT</span>
<span class="textstyle">SNAKE</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
<span class="textstyle">TESTING</span>
</div>
</div>

Try to use callback function:
$(document).ready(function(){
$('[id^="clr"]').each(function(i) {
let $this = $(this);
$this.fadeOut(0, function () {
setTimeout(function() {
$this.fadeIn(1850);
}, 1000 * i);
});
)};
});

How can I remove an element added by jquery?

I want list items moved to a div when clicked and vice versa. But it seems, only elements loaded from the source can be moved.
How can I do that?
Thanks.
<div class="green">
<ul id="selectable">
<li class="content-item">Item A</li>
</ul>
</div>
<div class="red">
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
<span class="selected-item">Item 1</span>
</div>
<script>
$(".selected-item").click(function() {
var text = "<li class='content-item' >"+$(this).text()+"</li>";
$(".green #selectable").prepend( text );
$(this).remove();
});
$(".content-item").click(function() {
var text = "<span class='selected-item'>"+$(this).text()+"</span>";
$(".red").append( text );
$(this).remove();
});
</script>
http://jsfiddle.net/wGz8s/112/

You should use jQuery's event delegation.
The problem is: your jsFiddle is using jQuery 1.4 (very old version), and it doesn't have the .on event.
I've updated it to the version 1.11, and it works like a charm:
$(".abc").on("click", "span", function(e) {
var text = "<li class='content-item' >"+$(e.target).text()+"</li>";
$(".choices #selectable").prepend( text );
$(e.target).remove();
});
$(".choices").on("click", "li", function(e) {
var text = "<span class='selected-item'>"+$(e.target).text()+"</span>";
$(".abc").append( text );
$(e.target).remove();
});
http://jsfiddle.net/wGz8s/113/

Try to use event delegation here since the elements that you are adding at the runtime would not be available during event binding,
$(document).on("click",".selected-item", function() {
var text = "<li class='content-item' >"+$(this).text()+"</li>";
$(".green #selectable").prepend( text );
$(this).remove();
});
and
$(document).on("click",".content-item", function() {
var text = "<span class='selected-item'>"+$(this).text()+"</span>";
$(".red").append( text );
$(this).remove();
});
And in the place of the document in my code use a static closest dom element of the selector which is being passed inside .on()

getting the id of an element in jquery onlclick?

this is a very simple example of a html page
<span class ="title" id="title_1">this is</span>
<span class="toggle" id="toggle_1>paragraph 1</span>
<span class ="title" id="title_2">this is</span>
<span class="toggle" id="toggle_2">paragraph 2</span>
im trying to do an onlcick event with the toggle functon, so basically when the user clicks title_1 the toggle_1 will hide and show, and if the user clicks title_2 it will show and hide toggle_2, i hope this makes sense.
(document).ready(function() {
$('.toggle').hide();
$('#title_').click(function() {
$('#toggle_').toggle('slow');
});
});
i started my jquery like this, just don't know what to do from here. thanks

You could:
$('.toggle').hide();
$('.title').click(function() {
$(this).next(".toggle").toggle('slow');
});

Try this
(document).ready(function() {
$('.toggle').hide();
$('.title').click(function() {
$(this).closest('.toggle').toggle('slow');
});
});

Preventing the user to click a div when its fading out

I'm trying to create a filtering system where the user can filter for answers using more than one category, but the user can't choose more than one option from each category, so upon clicking an option from any category, that category will fade out ... I have the following little problem, if the user clicks on another option from the same category while it's fading out, he will be able to choose two options from the same category ... How can I disable any click on the category when it's fading out ??
Here is the code I'm using:
HTML:
<div class="search-list" id="program-list">
<span class="search-title">Category 1</span>
<span data="program-list">Option 1</span>
<span data="program-list">Option 2</span>
<span data="program-list">Option 3</span>
<span data="program-list">Option 4</span>
<span data="program-list">Option 5</span>
<span data="program-list">Option 6</span>
</div> <!-- search-list -->
<div class="search-list" id="trainer-list">
<span class="search-title">Category 2</span>
<span data="trainer-list">Option 1</span>
<span data="trainer-list">Option 2</span>
<span data="trainer-list">Option 3</span>
<span data="trainer-list">Option 4</span>
</div> <!-- search-list -->
<div class="search-list" id="issue-date">
<span class="search-title">Category 3</span>
<span data="issue-date">Option 1</span>
<span data="issue-date">Option 2</span>
<span data="issue-date">Option 3</span>
<span data="issue-date">Option 4</span>
<span data="issue-date">Option 5</span>
<span data="issue-date">Option 6</span>
</div> <!-- search-list -->
JQuery:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
I tried using the following JQuery code but it didn't work:
$('.search-option').click(function(e) {
e.preventDefault();
});
Thanks in advance...

You can set an indicator in your function:
$('.search-option').click(function(){
if(indicator) {
return false
}
...
}
The indicator is something set when the fade starts and clears when it ends. It could be:
a javascript variable,
or - you can check the current opacity,
or - or you can set/clear a class name during the fade.

Simply remove the 'search-option' class from all options in a category once it is clicked.

You can set the click event to null once it has fired:
$('.search-option').click(function(){
$(this).click(null); // set click to do nothing on the clicked element
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
This will only turn off the click action on the specifically clicked element so your other filters will continue to work until each of them has been selected once. If you want to re-enable the click function after everything has happened you can save the function, disable it, then re-enable at the end as below:
$('.search-option').click(function(){
var fun = $(this).click;
$(this).click(null); // set click to do nothing on the clicked element
// OTHER CODE
$(this).click(fun);
});

Since this all hinges on the user clicking on an element with the class "search-option", just remove that class from the element and its siblings before starting the fade and then restore it with a callback after the fade runs. That way, nobody can click twice:
$('.search-option').click(function() {
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent().children().removeClass('search-option');
$(this).parent('.search-list').fadeTo('slow', 0, function() {
$(this).children().addClass('search-option');
});
});

Hey everyone ... I finally solved it, I had to change the whole structure of the function and use the methods "unbind" and "bind" ... Here is the solution if anyone is interested in it:
$('.search-option').click(work);
});
function work(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).unbind('click');
$(this).siblings('a').unbind('click');
$(this).parent('.search-list').fadeOut('slow');
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeIn('slow');
$('#'+$(this).attr('data')).children('a').bind('click',work );
$(this).remove();
});
};
Now the user can't choose more than one option at each category ....

Try:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
// ADDED LINES
$(this).parent('.search-list').find('a').each(function(){
$(this).click(function(){return false;});
});
// END: ADDED LINES
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});