I want add select2 to tag <select id="test" class="select2"></select> dynamically. E.g
<select id="test" class="select2"></select>
<button onclick="applySelect2()">Click me</button>
<script type="text/javascript">
function applySelect2() {
//code witch will aplly select2 for <select id="test" class="select2"></select>
//Please help
}
</script>
First you need the jQuery library, than something like this should help:
<select id="test" class="select2"></select>
<button id="myButton">Click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
jQuery(function($) { // DOM READY
$('#myButton').click(function(){
$("#test").select2();
});
});
</script>
Or similar to your example:
jQuery(function($) { // DOM READY
function applySelect2() {
//code
}
$('#myButton').click(function(){
applySelect2();
});
});
you mean this?
function applySelect2() {
$(".select2").select2();
}
Related
if I want to use jscolor.js in HTML or in jquery function but it does not work after button click
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class=jscolor value=714BAB>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
it works in html but does not after button click
Try this
What I have done is re initialize the jscolor by adding jscolor.installByClassName("jscolor");
Run the snippet and see for yourself.
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class='jscolor' value='714BAB'>");
jscolor.installByClassName("jscolor");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
You could create the element and append it dynamicly like this. You can use the fromString method to set the right color.
$(document).ready(function() {
$('#click').click(function() {
var input = document.createElement('INPUT');
var picker = new jscolor(input);
picker.fromString('714BAB');
$("#placeholder").empty().append(input);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
Well, My problem is described below:
I have this javascript code in order to created a href in a table:
$('#table').html('<a name="example" class="one">One</a><a name="example" class="two">Two</a>');
And then I wanna know which a tag I pressed.... something like this:
$("a[name=example]").click(function(e) {
var example= $(this).attr("class");
alert(example);
}
But this doesn't work...
Could you help me?
Thx 4 advance!
You should use event delegation on() to attach the click event to the fresh DOM (a tags) added dynamically to the page by your script :
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
Hope this helps.
$('#table').html('<a name="example" class="one">One</a><br><a name="example" class="two">Two</a>');
$("#table").on('click','a[name=example]',function(e) {
var example= $(this).attr("class");
alert(example);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table">
This is how you should do it.
$("#table").on('click','a[name="example"]',function() {
var example= $(this).attr("class");
alert(example);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<body>
<div id="table">
<a name="example" class="one">One</a>
<a name="example" class="two">Two</a>
</div>
</body>
</html>
In the following code the button "alt2" shows up but does not alert "hi"
Is this the proper way to add a button?
<body>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$("#add").click(function(){
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function(){
alert("hi");
});
});
</script>
on("click")... for the second alt2 is missing. also i would suggest you use on("click")... instead of .("click") . .("click") this one may miss to fire the second time
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
$(document).on("click", "#add", function(e) {
e.preventDefault();
$("#test").html("<button id='alt2'>alt2</button>");
});
$(document).on("click", "#alt", function(e) {
e.preventDefault();
alert("hi 1");
});
$(document).on("click", "#alt2", function(e) {
e.preventDefault();
alert("hi 2");
});
});
</script>
</body>
$("#add").click(function() {
$("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function() {
alert("hi");
});
$(document).on('click',"#alt2",function() { // use .on()
alert("hi 2");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<br>
<button id="add">add</button>
<br>
<button id='alt'>alt1</button>
Use .on() for dynamically added elements.
Description: Attach an event handler function for one or more events to the selected elements.
I have a text input with an id of auto_change_date and i am trying to hide it on page load using:
$(document).ready(function(){
$("#auto_change_date").hide();
});
but its just not hiding it
i am then using this code to make it display (.show) when a select option is selected:
<script type="text/javascript">
$('#status').on('change',function(){
if( $(this).val()==="Auto Change"){
$("#auto_change_date").show()
}
else{
$("#auto_change_date").hide()
}
});
</script>
<input type="text" name="auto_change_date" onclick="ds_sh(this);" />
you are missing here id
put it as follows
<input type="text" name="auto_change_date" id="auto_change_date" onclick="ds_sh(this);" />
now your jquery will work fine
See Fiddle
Nothing is wrong with Your jQuery. But I would suggest you to use Pure CSS
<style>
#auto_change_date {
display:none;
}
</style>
OR, Simple JavaScript
document.getElementById('auto_change_date').style.display = 'none';
Add html input type = "text" with id = "auto_change_date"
<input type="text" id="auto_change_date" />
Now add following javascript function:
$(document).ready(function(){
$("#auto_change_date").hide();
});
Its Working fine for me.
With vanilla Javascript
var input = document.getElementById('auto_change_date');
input.style.display = 'none';
or
input.style.visibility = 'hidden';
<style>
.hidden{
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#auto_change_date').addClass('hidden');
$("#auto_change_date").hide();
});
</script>
the div should be made display:none at first inorder to apply this
You are not defining id to element and you should add jquery js to work this.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Html :
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
simply try something like this
<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />
your javascript code should be like this
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#status').on('change',function(){
if(this).value ==="Auto Change" ){
$("#auto_change_date").show();
} else {
$("#auto_change_date").hide();
}
});
});
</script>
i have a form and when i append another field to it i cant use this in my other function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$(".inputMems").click(function(){
alert("hi")
});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
look my inputMems button doesnt work : http://jsfiddle.net/Yelesee/3uecqLxn/
To bind events in dynamic content you need to use
$(parent_selector).on(event, selector, callback);
So, essentially it adds the event to the parent element and checks the e.target and fires the event if it matches your selector.
So, in your case you can use,
$('#hello').on('click', '.inputMems', function(){
///do here
});
One more thing you can do is attaching the event listener AFTER the new dom has been created.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$("#hello").on('click','.inputMems',function(){console.log("hi");});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
Since you are dynamically adding the DOM element with reference to id = hello,
The click() wont work. It will work for the elements that already exist. It won't get bound to elements created dynamically. To do that, you'll have to create a "delegated" binding by using on().
Replace your click event
$(".inputMems").click(function(){
alert("hi")
});
to this!
$("#hello").on("click", "input.inputMems", function(){
alert("Here u go!");
});
JSFIDDLE
As an alternative to the other answers you can define the click handler when you create the element. Although i do recommend to use .on('click', function(){});
$(document).ready(function() {
$(".registerNums").click(function() {
var newInput = $('<input type="button" value="register" class="inputMems">');
newInput.click(function() {
alert("hi")
});
$("#hello").append(newInput);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
You have insert
$(".inputMems").click(function(){
alert("hi")
});
inside $(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
.
It should be like this
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").html('<input type="button" value="register" class="inputMems">');
$(".inputMems").click(function(){
alert("hi");
});
});
});