I want replace a code with other code, after click on new code get alert, but don't work alert in my code. how can fix it?
DEMO: http://jsfiddle.net/9Ggsn/
Html:
<select>
<option>select 1</option>
<option>select 2</option>
<option>select 3</option>
</select>
<div class="dfg">Test</div>
jQuery:
$('select').on('change', function(){
//alert('ook');
$('.dfg a').replaceWith('Link')
});
$('.pon').on('click', 'a', function(){
alert('ook');
});
That's because in your markup a.pon doesn't have parent element with class of pon, event should be delegated from one of static parents of the element or document object.
Change:
$('.pon').on('click', 'a', function(){
To:
$(document).on('click', 'a.pon', function(){
Or:
$('.dfg').on('click', 'a.pon', function(){
try this:
$(document).on('click', '.pon', function(){
alert('ook');
});
You are removing an element from the DOM therefore you have to re-bind.
$('select').on('change', function(){
//alert('ook');
$('.dfg a').replaceWith('Link');
BindLink();
});
function BindLink(){
console.log("in link");
$('.pon').on('click', function(e){
e.preventDefault();
alert('ook');
});
}
See this fiddle fiddle Update
$('select').on('change', function(){
//alert('ook');
$('.dfg a').replaceWith('Link')
});
$('body').delegate('.pon','click', function(){
alert('ook');
});
Related
jQuery(document).ready(function($){
$('#location').change(function(){
let selected_option = $(this).find(":selected").val();
$('#locationHeading').text(selected_option)
})
});
instead of waiting for a change on the #location which is a <select> I want to soon as the page loads do that function.
the reason being the selected option will already be selected once the page loads.
any help would be appreciated.
thanks
you can use .trigger()
jQuery(document).ready(function($){
$('#location').change(function(){
let selected_option = $(this).find(":selected").val();
$('#locationHeading').text(selected_option)
}).trigger('change') // <== add this
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="locationHeading"></h1>
<select id="location">
<option value="A">A</option>
<option value="B">B</option>
</select>
Put the change handler in a separate function, and call it in addition to adding the listener:
jQuery(function ($) {
const loc = $('#location');
const handler = () => {
let selected_option = loc.find(":selected").val();
$('#locationHeading').text(selected_option)
};
loc.on('change', handler);
handler();
});
I try to call a function when a value from the select box is chosen. I would also have a default value selected and a button appear for that value on the page.
This is my select box:
<select id="messagingMode" class="bootstrap-select" >
<option value="1" selected="selected">Webhooks messaging</option>
<option value="2">Real time messaging</option>
</select>
This is the js:
$('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this));
And the function just prints the selected value for the moment:
function showCorrespondingAuthorizationBtn(select) {
console.log(select.val());
}
Nothing is printed in the console, why doesn't this work?
Try with direct call function name not with function() .Default bind with this in change function
$('#messagingMode').on('change',showCorrespondingAuthorizationBtn);
function showCorrespondingAuthorizationBtn() {
console.log($(this).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="messagingMode" class="bootstrap-select">
<option value="1" selected="selected">Webhooks messaging</option>
<option value="2">Real time messaging</option>
</select>
You are invoking the function, not passing it as reference. Also this is not what you think it is in that context.
Try:
$('#messagingMode').on('change',showCorrespondingAuthorizationBtn);
function showCorrespondingAuthorizationBtn(event) {
console.log($(this).val());
// or
console.log(this.value);
}
Use the jQuery event delegation:
$('#messagingMode').on('change',function(){
console.log($(this).val());
});
Here is a working fiddle.
$('#messagingMode').change(function () {
showCorrespondingAuthorizationBtn($(this).val());
});
It is not triggering because your are invoking the method on your event attachment logic.
// calling the invocation operator () triggers the method
$('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this));
In order to solve this, try the following code.
function onDropdownChanged() {
var sender = $(this);
console.log(sender.val());
}
$(document).ready(function() {
$('#messagingMode').on("change", onDropdownChanged);
})
I'm looking for some way to print the ID, or let me select the ID from an option in a select
here my code:
$(document).ready(function() {
$("#direcciones-envio-usuario").click(function() {
alert(this.id);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker show-tick" id="direcciones-envio-usuario" data-width="85%" data-header="Eligir dirección">
<option>Mi casa</option>
<option>Casa de pepe</option>
<option data-divider="true"></option>
<option data-icon="glyphicon-plus-sign" id="nueva_direccion_btn">Nueva dirección</option>
</select>
Use change event instead of click event, here use :selected selector
$("#direcciones-envio-usuario").change(function(){
alert($(':selected', this).attr('id'));
});
I prepared this example in a fiddle, i hope will be useful https://jsfiddle.net/jgonzalez315/8znq29g7/
$(document).ready(function(){
$("#direcciones-envio-usuario").change(function(){
alert($( "#direcciones-envio-usuario option:selected" ).text());
if($( "#direcciones-envio-usuario option:selected" ).text()=="Nueva dirección")
{
//IF YOU WANT attr id
alert($( "#direcciones-envio-usuario option:selected" ).attr('id'));
}
});
})
Please check the plunk
The main code to get this to work for your example is:
$(document).ready(function(){
$("#direcciones-envio-usuario").change(function(){
alert($(this).children("option:selected").attr("id"));
});
})
I think this solves what you were tring to achieve. Let me know if you need any refinements :)
How about
$("#direcciones-envio-usuario").change(function(){
alert($(this).children(":selected").attr("id"));
});
Also, since it is a select element it would be wise to change your event to .change() instead of .click().
You can use the contextual this to select the child, which is selected, and get its ID attribute.
$("#direcciones-envio-usuario").change(function(){
alert($(this).find(":selected").attr("id"));
});
I'm trying to write a small script that prints the value of a select box to the body class.
I'm hoping to have it so that when the value changes it auto swaps the old class for the new class (value) Here is a js fiddle of the script i'm working on for it.
It is changing the class just fine but not finding the initial value of the select box on page load.
Any help would be awesome!
http://jsfiddle.net/BMsP8/
jQuery(document).ready(function () {
// On load
jQuery(document).ready(function () {
if (jQuery("select[name=mySelections] option:selected").val() == 'myvalue') {
jQuery("#page_template");
}
});
jQuery('#page_template').change(function () { // on change event
jQuery('body')
//.removeClass() // remove the classes on the body
// or removeClass('class1 class2 ...') in order to not affect others classes
.addClass(jQuery(this).val()); // set the new class
})
I think problem is in your selector try this,
if (jQuery("#page_template").val() == 'myvalue') {
alert(jQuery("#page_template").val());
}
Also you can use toggleClass() instead of addClass() or removeClass() like,
jQuery('#page_template').change(function () { // on change event
jQuery('body').toggleClass(jQuery(this).val()); // toggle the class
});
Demo
set your html
<select id="page_template">
<option value="Default">Default</option>
<option value="class1">First Class</option>
<option value="class2">2nd Class</option>
</select>
in jS
$(document).ready(function(){
alert($("#page_template").val());
if ($("#page_template").val() == 'Default') {
$('body').addClass($("#page_template").val());
}
$('#page_template').change(function () { // on change event
$('body').removeClass().addClass($(this).val()); // set the new class
})
});
demo
Try this:
jQuery('#page_template').change(function () { // on change event
var cls = jQuery(this).val();
jQuery('body').removeAttr("class");
jQuery('body').addClass(cls); // set the new class
});
Fiddle here.
Hope this helps
**HTML**
<select id="page_template">
<option value="myvalue">Default</option>
<option value="class1">First Class</option>
<option value="class2">2nd Class</option>
</select>
**JS**
jQuery(document).ready(function () {
if (jQuery("#page_template option:selected").val() == 'myvalue') {
jQuery('body').addClass(jQuery("#page_template option:selected").val());
}
jQuery('#page_template').change(function () { // on change event
jQuery('body').removeAttr("class");
jQuery('body').addClass(jQuery(this).val()); // set the new class
});
})
Why doesn't the following code work?
$('select option').live('click', function(){
alert('hello')
})
html:
<select class="ok">
<option>5</option>
</select>
EXAMPLE: http://jsfiddle.net/fQxj7/2/
Do this instead:
$('select').change(function(){
alert('hello');
});
If you need to know the selected value inside the event handler, then you can do this:
$('select').change(function() {
var selectedOption = $(this).val();
});
http://jsfiddle.net/FishBasketGordo/2ABAh/