I used jQuery 1.4.2 and had a problem with delegate click event for radio button on IE8. I had to click twice to trigger click event on radio element.
HTML:
<div id="data"></div>
JS:
jQuery(function () {
jQuery('#data').delegate(':radio', 'click', function () {
alert(1);
});
jQuery("#data").append('<input type="radio" value="abc" name="flight_group"/> abc');
jQuery("#data").append('<input type="radio" value="de" name="flight_group"/> de');
});
Here is my fiddle:
http://jsfiddle.net/secretlm/n4G9Z/3/
Thanks so much.
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
I have a situation where I have a click event attached to an element's onClick attribute and also a click event that fires on any element with a specific class. The element's onClick event causes a panel on the page to close. The class's onClick event causes the page to scroll to an element lower on the page.
The problem is that both seem to fire at the same time causing the page to scroll beyond the targeted element. Here is a code sample:
$(document).ready(function() {
$('.proceed').on("click", function() {
$('html, body').animate({
scrollTop: $(this).closest('.item-section').next().offset().top
}, 2000);
})
});
function openPanel() {
var rb1 = $("#radioButton1").is(':checked');
alert("Clicked");
$('#containerBox1').toggle(rb1);
}
.item-section {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div class="item-section">
<p>Choose a food</p>
<input type="radio" id="radioButton1" name="food" value="pizza" onclick="openPanel()">Pizza<br>
<div id="containerBox1" style="display: none;">
<p>Choose a topping</p>
<input type="radio" name="topping" value="pepperoni">Pepperoni<br>
<input type="radio" name="topping" value="vegetarian">Vegetarian<br>
<button class="proceed">Proceed to next section</button>
</div>
<input type="radio" name="food" value="burger" class="proceed">Burger<br>
<input type="radio" name="food" value="fish" class="proceed">Fish
</div>
<div class="item-section">
<p>Drink selection would be here</p>
</div>
</form>
Does anyone know how to fix this keeping in mind that my real code is much larger than the sample provided and has more classes and buttons.
You could try
extract the .proceed click handler to a named function
call that named function from the .proceed click handler
in openPanel, do whatever the function needs to do, then call the scroll handler, then call stopPropagation on the event
In other words, don't allow two click handlers to fire for your radio button, but have one click handler that does both tasks and then stops propagation.
You don't need two onclick events. Just process the one for .proceed and check to see if rb1 is checked.
$(document).ready(function() {
$('.proceed').on("click", function() {
var rb1 = $("#radioButton1").is(':checked');
if( rb1 ) {
alert("Clicked");
$('#containerBox1').toggle(rb1);
}
$('html, body').animate({
scrollTop: $(this).closest('.item-section').next().offset().top
}, 2000);
})
});
As per below html controls , if I try to change the "id" of Submit to "Save" , click of Save is not working then.
HTML
<html>
<head>
</head>
<body>
<input type="button" value="Submit Request" id="Submit"class="buttonclass"/>
<input type="button" id="cancel" value="Cancel" class="buttonclass" />
</body>
</html
JS CODE BELOW :
$("#Submit").on({
click: function () {
$(this).attr('id', 'Save');
return false;
}
});
$("#Save").on({
click: function () {
alert("Save Event Fired");
}
});
You aren't binding the click event to #Save because the id #Save only exists AFTER the Submit button has been pressed (there is no #Save on load). But if you put the click event on the body and only accept the #Save, you can bubble the event up and handle it there.
$("#Submit").on('click', function (e) {
e.stopPropagation()
alert("Submitted Fired");
$(e.target).attr('id', 'Save');
$(this).unbind('click');
})
$("body").on('click', '#Save', function (e) {
alert("Save Event Fired");
})
https://jsfiddle.net/6Lchafwa/1/
If this is the answer you are looking for, press the green tick on the left.
Having this simple dropdown menu:
<select id="foo">
<option>bar</option>
</select>
And an jQuery listener initialization like this:
$("#foo").on("click", function() {
console.log("stuff");
});
The event is only fired when the user closes the drop down, either by selecting an option or by clicking outside of the box. Is there any way to get the event, when he opens the box?
The right event for this purpose is change click together and will get fire every time that select input changed or clicked.
$("#foo").on("click change", function(e) {
$("#output").html("Event type: " + e.target.nodeName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
<option value="1">foooo</option>
<option value="2">bar</option>
</select>
<div id="output"></div>
Try events:
show.bs.dropdown
shown.bs.dropdown
https://getbootstrap.com/docs/4.0/components/dropdowns/#events
$(document).on('focus', '#foo', function () {
console.log('Dropdown Open');
});
Works for me !!
i am trying to learn and create a jquery which $("#answer") and find all the checkbox inside and check. As an example if checkbox inside #a1 is checked other div (a2,a3,a4) is hidden or other message come out. if i uncheck the #a1 all the div will come out again.
Please enlighten me on the code.
<div id="answer">
<div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
<div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
<div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
<div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
</div>
function cbox() {
if (this checkbox is checked) {
target other div inside (#answer) and add .hide()
}
}
2)Is there anyway to add a trigger where i don't need to use onlick="cbox" ?
tq
It's better to use .click() instead of inline javascript onclick.
However, you should use .change() event for input elements instead of click:
$('input[type="checkbox"]').change(function() {
$(this).parent().siblings('div').toggle(!this.checked);
});
Fiddle Demo
Use .change() event instead of .click(). Try this:
$('input[type="checkbox"]').change(function() {
$(this).parent('div').siblings('div').toggle(!this.checked);
});
DEMO
Try this:
$("#answer input").change(function () {
if ($(this).is(":checked")) {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "none");
})
} else {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "block");
})
}
});
DEMO