Here's my HTML code inside the form tag:
<section id="mp-cart-after" class="mp_cart_after">
<div id="mp-checkout-payment-form">
<h3 class="mp_sub_title">Payment</h3>
And here's the JS:
jQuery( document ).ready(function() {
jQuery('.mp_sub_title').click(function(e){
e.preventDefault();
jQuery('.mp_sub_title').hide();
});
});
I have tested jQuery on elements outside this form and it works. `
as the form is dynamically generated, you need to use delegated .on('click'
like so:
jQuery( document ).ready(function() {
jQuery('body').on('click', '.mp_sub_title', function(e){
e.preventDefault();
jQuery('.mp_sub_title').hide();
});
});
Maybe you forgot some closing tags. However this works:
<form>
<section id="mp-cart-after" class="mp_cart_after"></section>
<div id="mp-checkout-payment-form">
<h3 class="mp_sub_title">Payment</h3></div>
</form>
and
$(document).ready(function () {
$(".mp_sub_title").click(
function (e) {
e.preventDefault();
jQuery('.mp_sub_title').hide();
}
);
});
Here is a working jsfiddle: Working Example
Related
I need trigger mouse right click using javascript or jQuery.
Here I tried below code it is not working for me
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$('#testing').contextmenu();
//or
$('#testing').trigger({
type: 'mousedown',
which: 3
});
});
</script>
can you please any provide information on this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$("#testing" ).contextmenu(function() {
alert( "Right clicked" );
});
});
</script>
I am trying a way to click a anchor tag using Jquery which is inside multiple div.
Below is my code:
<div class="mainDiv">
<div id="secondDiv" class="check">
<div class="iteratorDiv1" id="id1">
link text
</div>
<div class="iteratorDiv2" id="id2">
link text
</div>
<div class="iteratorDiv3" id="id3">
link text
</div>
<div class="iteratorDiv4" id="id4">
link text
</div>
</div>
</div>
Now if i do something like this
$(".iteratorDiv1 a").live('click',function(e)
{
alert("hey working");
});
But using this approach i will have to write this function for iteratorDiv2,iteratorDiv3 and iteratorDiv4 also.
Is there any way i can identify the anchor click from the mainDiv something like below. This did not work though.
$(".mainDiv a").live('click',function(e)
{
alert("hey working");
});
I am just trying to prevent repeatative coding. Any guidance.
Please check the following jsFiddle:
http://jsfiddle.net/amoolya93/1xL9od85/3/
Your code works fine until Jquery version 1.8.3 .For later versions, please use the following:
$('.mainDiv a').on('click',function(e)
{ alert("hey working");
});
I just did some test here, and seem to work.
You might tell jQuery where exactly your "a" is, so you can try something like this:
$(".mainDiv div > a").on("click", function () {
alert("Hey it's working");
});
or
$(".mainDiv a").on("click", function () {
alert("Hey it's working");
});
$("a").on('click',function(e)
{
var parent = $(this).parent();
alert(parent.attr(class)) ;
});
Use .parent() method to get parent of any link you clicked.
<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/
I want to append a div with jQuery and then use jQuery click function on a class which is inside the appended div. Here's my code, it does not work if I append the div, however it works fine if the div already exists in the html.
HTML:
<div class="add">
Add item
</div>
<div class="container">
</div>
jQuery:
$('.add').click(function(e){
e.preventDefault();
var box = '<div class="box"><div class="remove">x</div></div>'
$('.container').append(box)
});
$('.remove').click(function(){
alert("remove");
});
Demo:
http://jsfiddle.net/Y625A/
Use event delegation
$('.container').on('click','.remove',function(){
alert("remove");
});
Demo --> http://jsfiddle.net/Y625A/2/
http://api.jquery.com/on/
http://learn.jquery.com/events/event-delegation/
Try using live to bind the events, this will bind them when the new items are created:
$('.add').live('click', function(e){
});
You have to bind the click even once you create the element:
$('.add').click(function(e){
e.preventDefault();
var box = "<div class='box'><div class='remove'>x</div></div>"
$('.container').append(box)
$('.remove').click(function(){
alert("remove");
});
});
http://jsbin.com/ofoteq/1/edit
I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.
When a user selects the textbox I want to change the desired div tag.
This is how the html looks
<div class="left">
<div class="right">
<input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
<span id="rfInput"></span>
</div>
</div>
my jquery looks like this
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$('.box.left').addClass("active");
}).blur(function () {
$('.box.left').removeClass("active");
});
});
</script>
Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class="myTextBox" how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?
Any help would be great!
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
})
.blur(function () {
$(this).closest('.left').removeClass("active");
});
});
</script>
this refers to the element that received the event.
So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.
.closest() - http://api.jquery.com/closest/
you were not that clear, so, here,s my guess...
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
}).blur(function () {
$(this).closest('.left').removeClass("active");
});
});