How to hide the p that was clicked in the code? Existing new ones?
(function($) {
$('body').on('click', function(event) {
if (event.target == $('button')[0]) {
$('body').append('<p class="myp">text</p>')
}
if ($(event.target).attr('class') == 'myp') {
// hide the clicked p
}
})
})(jQuery)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>
To make your logic work to detect the p which was clicked, use hasClass(), then hide(), like this:
(function($){
$('body').on('click', function(event) {
if (event.target == $('button')[0]) {
$('body').append('<p class="myp">text</p>')
}
if ($(event.target).hasClass('myp')) {
$(event.target).hide();
}
})
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>
However, I presume you're attempting to work with the click event on the body in this manner because the child elements are dynamically generated. As such there's a much better way of achieving what you're doing here; delegated event handlers:
jQuery(function($) {
$(document).on('click', 'button', function() {
$('body').append('<p class="myp">text</p>');
}).on('click', '.myp', function() {
$(this).hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>
Why with event.target .Just target with class or id of element to initiate the function
$(document).ready(function() {
$('#add').on('click', function() {
$('body').append('<p class="myp">text</p>')
})
}).on('click', 'p.myp', function() {
$(this).hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<p class="myp">text</p>
<p class="myp">text</p>
Related
I tried to use jQuery to make a click on a specific element trigger another click on another element,
that was my code:
jQuery( ".menu-item menu-item-type-custom menu-item-object-custom
menu-item-37" ).click(function() {
jQuery(
".elementor-tab-title-2261" ).click(); });
You're logic appears to be correct, I'm assuming the class selectors you're using are not targeting the right elements, jQuery isn't being initialized, or there is an error earlier in the code that prevents this part of the code from running.
Check out this working code I wrote and compare it to what you have:
$('#btn2').on('click', function() {
console.log('btn 2 clicked!');
});
$('#btn1').click(function() {
$('#btn2').click();
});
.button {
padding: 16px;
margin: 5px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn1" class="button">
<p>
Button one
</p>
</div>
<div id="btn2" class="button">
<p>
Button two
</p>
</div>
In javascript, it can be achieved through dispatchEvent
const btn1 = document.querySelector('#btn1');
const btn2 = document.querySelector('#btn2');
const event = new Event('click');
btn1.addEventListener('click', function(e) {
e.preventDefault();
console.log('Button 1 clicked');
btn2.dispatchEvent(event);
});
btn2.addEventListener('click', function(e) {
e.preventDefault();
console.log('Button 2 clicked');
});
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
jQuery
$('#btn1').on('click', function(e) {
e.preventDefault();
console.log('Button 1 clicked');
$('#btn2').click();
});
$('#btn2').on('click', function(e) {
e.preventDefault();
console.log('Button 2 clicked');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
Here is a more generalized way to do that not trigger only a click.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function myFunction(){
$(".b").trigger("click");
}
$(".a").click(function(){
$(".a").hide();
myFunction();
});
$(".b").click(function(){
$(".b").hide();
});
});
</script>
</head>
<body>
<p class="a">Click me away!</p>
<p class="b">Click me too!</p>
</body>
</html>
I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:
Html
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Jquery
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").trigger('click');
});
});
With the above code, I'm only able to do half of what I want. So, tried the following, did not work.
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").on('click');
});
$("button").click(function () {
$("#bigbutton").off('click');
});
});
PS. I'm extremely sorry about the formating errors as my phone has a broken screen.
Something like this?
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseover(function () {
$("#bigbutton").trigger('click');
});
$("#button1").click(function () {
$("#bigbutton").off('mouseover').css("background-color", "");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});
You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>
I'm trying to have a button create a line through a list but if you click it again it'll undo the line-through. I've tried a .toggle() but it did not work:
original code:
$("div").on("click", ".doneButt", function(e) {
e.preventDefault();
$(this).parents("li").css("text-decoration", "line-through");
});
.toggle attempt:
$(".doneButt").toggle(function() {
$(this).parents("li").css("text-decoration", "line-through");
}, function() {
$(this).parents("li").css("text-decoration", "none");
});
$(".doneButt").click(function() {
$(this).parents("li").toggleClass('withline');
});
.withline {
text-decoration: line-through
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>asdasdasda
<input type='button' class='doneButt' value='Click' />
</li>
</ul>
Using .toggleClass()
$( ".doneButt" ).on("click",function() {
var style = $(this).attr("style")+"";
if(style=="undefined")
$(this).parents("li").css("text-decoration", "line-through");
else
$(this).parents("li").removeAttr("style");
});
<script>
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
So the above code works perfectly except that I need to make it so that a user can select the text inside the textarea. At this moment logically when they click the textarea, as its contained by .alert, it instantly gets removed with the div.
I can't remove the textarea from the div as I need it both contained by the div, and removed when other parts of the div are clicked.
So how can I specifically exclude the textarea from the click event of its containing div while still allowing the click event from the containing div to remove the textarea.
You can do this by preventing the click event from propagating (bubbling) from the textarea to the div:
$(".alert textarea").on("click", function(e) {
e.stopPropgation();
});
Example:
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
$(".alert textarea").on("click", function(e) {
e.stopPropagation();
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Alternately, in your existing handler, check to see if the event passed through the textarea:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
Example:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note that that second one relies on the fact that your .alert element can never be inside another textarea, because of the nature of the elements. It won't work in the general case. This would, but it's a pain:
$(".alert").click(function(e){
var $t = $(e.target);
if (!$t.is("textarea") && !$t.parentsUntil(this, "textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
you can also use the not selector to do this :
<script>
$(".alert *:not(textarea)").click(function(){
$(this).fadeOut(300, function(){
$(this).parent().remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
see this fiddle: https://jsfiddle.net/zLq6dztu/